GithubHelp home page GithubHelp logo

hdushku / yii2-fontawesome Goto Github PK

View Code? Open in Web Editor NEW

This project forked from rmrevin/yii2-fontawesome

0.0 0.0 0.0 1.05 MB

Asset Bundle for Yii2 with Font Awesome http://fortawesome.github.io/Font-Awesome/

License: MIT License

PHP 100.00%

yii2-fontawesome's Introduction

Yii 2 Font Awesome Asset Bundle

This extension provides a assets bundle with Font Awesome for Yii framework 2.0 applications and helper to use icons.

For license information check the LICENSE-file.

License Latest Stable Version Latest Unstable Version Total Downloads

Code Status

Scrutinizer Code Quality Code Coverage Travis CI Build Status Dependency Status

Support

Update to 2.17

Be careful in version 2.17 deprecated methods were removed. More in the changelog.

Installation

The preferred way to install this extension is through composer.

Either run

composer require "rmrevin/yii2-fontawesome:~2.17"

or add

"rmrevin/yii2-fontawesome": "~2.17",

to the require section of your composer.json file.

Usage

In view

rmrevin\yii\fontawesome\AssetBundle::register($this);

or as dependency in your main application asset bundle

class AppAsset extends AssetBundle
{
	// ...

	public $depends = [
		// ...
		'rmrevin\yii\fontawesome\AssetBundle'
	];
}

Class reference

Namespace: rmrevin\yii\fontawesome;

###Class FA or FontAwesome

  • static FA::icon($name, $options=[]) - Creates an component\Icon that can be used to FontAwesome html icon
    • $name - name of icon in font awesome set.
    • $options - additional attributes for i.fa html tag.
  • static FA::stack($name, $options=[]) - Creates an component\Stack that can be used to FontAwesome html icon
    • $options - additional attributes for span.fa-stack html tag.

###Class component\Icon ($Icon)

  • (string)$Icon - render icon
  • $Icon->render() - DEPRECATED! render icon
  • $Icon->tag($value) - DEPRECATED! set another html tag for icon (default i)
    • $value - name of tag
  • $Icon->addCssClass($value) - add to html tag css class in $value
    • $value - name of css class
  • $Icon->inverse() - add to html tag css class fa-inverse
  • $Icon->spin() - add to html tag css class fa-spin
  • $Icon->fixedWidth() - add to html tag css class fa-fw
  • $Icon->ul() - add to html tag css class fa-ul
  • $Icon->li() - add to html tag css class fa-li
  • $Icon->border() - add to html tag css class fa-border
  • $Icon->pullLeft() - add to html tag css class pull-left
  • $Icon->pullRight() - add to html tag css class pull-right
  • $Icon->size($value) - add to html tag css class with size
    • $value - size value (variants: FA::SIZE_LARGE, FA::SIZE_2X, FA::SIZE_3X, FA::SIZE_4X, FA::SIZE_5X)
  • $Icon->rotate($value) - add to html tag css class with rotate
    • $value - rotate value (variants: FA::ROTATE_90, FA::ROTATE_180, FA::ROTATE_270)
  • $Icon->flip($value) - add to html tag css class with rotate
    • $value - flip value (variants: FA::FLIP_HORIZONTAL, FA::FLIP_VERTICAL)

###Class component\Stack ($Stack)

  • (string)$Stack - render icon stack
  • $Stack->render() - DEPRECATED! render icon stack
  • $Stack->tag($value) - DEPRECATED! set another html tag for icon stack (default span)
  • $Stack->icon($icon, $options=[]) - set icon for stack
    • $icon - name of icon or component\Icon object
    • $options - additional attributes for icon html tag.
  • $Stack->icon($icon, $options=[]) - set background icon for stack
    • $icon - name of icon or component\Icon object
    • $options - additional attributes for icon html tag.

Helper examples

use rmrevin\yii\fontawesome\FA;

// normal use
echo FA::icon('home'); // <i class="fa fa-home"></i>

// shortcut
echo FA::i('home'); // <i class="fa fa-home"></i>

// icon with additional attributes
echo FA::icon(
    'arrow-left', 
    ['class' => 'big', 'data-role' => 'arrow']
); // <i class="big fa fa-arrow-left" data-role="arrow"></i>

// icon in button
echo Html::submitButton(
    Yii::t('app', '{icon} Save', ['icon' => FA::icon('check')])
); // <button type="submit"><i class="fa fa-check"></i> Save</button>

// icon with additional methods
echo FA::icon('cog')->inverse();    // <i class="fa fa-cog fa-inverse"></i>
echo FA::icon('cog')->spin();       // <i class="fa fa-cog fa-spin"></i>
echo FA::icon('cog')->fixedWidth(); // <i class="fa fa-cog fa-fw"></i>
echo FA::icon('cog')->li();         // <i class="fa fa-cog fa-li"></i>
echo FA::icon('cog')->border();     // <i class="fa fa-cog fa-border"></i>
echo FA::icon('cog')->pullLeft();   // <i class="fa fa-cog pull-left"></i>
echo FA::icon('cog')->pullRight();  // <i class="fa fa-cog pull-right"></i>

// icon size
echo FA::icon('cog')->size(FA::SIZE_3X);
// values: FA::SIZE_LARGE, FA::SIZE_2X, FA::SIZE_3X, FA::SIZE_4X, FA::SIZE_5X
// <i class="fa fa-cog fa-size-3x"></i>

// icon rotate
echo FA::icon('cog')->rotate(FA::ROTATE_90); 
// values: FA::ROTATE_90, FA::ROTATE_180, FA::ROTATE_180
// <i class="fa fa-cog fa-rotate-90"></i>

// icon flip
echo FA::icon('cog')->flip(FA::FLIP_VERTICAL); 
// values: FA::FLIP_HORIZONTAL, FA::FLIP_VERTICAL
// <i class="fa fa-cog fa-flip-vertical"></i>

// icon with multiple methods
echo FA::icon('cog')
        ->spin()
        ->fixedWidth()
        ->pullLeft()
        ->size(FA::SIZE_LARGE);
// <i class="fa fa-cog fa-spin fa-fw pull-left fa-size-lg"></i>

// icons stack
echo FA::stack()
        ->icon('twitter')
        ->on('square-o');
// <span class="fa-stack">
//   <i class="fa fa-square-o fa-stack-2x"></i>
//   <i class="fa fa-twitter fa-stack-1x"></i>
// </span>

// icons stack with additional attributes
echo FA::stack(['data-role' => 'stacked-icon'])
     ->on(FA::Icon('square')->inverse())
     ->icon(FA::Icon('cog')->spin());
// <span class="fa-stack" data-role="stacked-icon">
//   <i class="fa fa-square-o fa-inverse fa-stack-2x"></i>
//   <i class="fa fa-cog fa-spin fa-stack-1x"></i>
// </span>

// unordered list icons 
echo FA::ul(['data-role' => 'unordered-list'])
     ->item('Bullet item', ['icon' => 'circle'])
     ->item('Checked item', ['icon' => 'check']);
// <ul class="fa-ul" data-role="unordered-list">
//   <li><i class="fa fa-circle fa-li"></i>Bullet item</li>
//   <li><i class="fa fa-check fa-li"></i>Checked Item</li>
// </span>

// autocomplete icons name in IDE
echo FA::icon(FA::_COG);
echo FA::icon(FA::_DESKTOP);
echo FA::stack()
     ->on(FA::_CIRCLE_O)
     ->icon(FA::_TWITTER);

Set another prefix

FA::$cssPrefix = 'awf';

echo FA::icon('home');
// <i class="awf awf-home"></i>
echo FA::icon('cog')->inverse();
// <i class="awf awf-cog awf-inverse"></i>

yii2-fontawesome's People

Contributors

albertborsos avatar faryshta avatar haqqi avatar loveorigami avatar marc7000 avatar mauriziocingolani avatar mervick avatar oudingfan avatar rmrevin avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.