yii2 html ul,GitHub - rmrevin/yii2-fontawesome: Asset Bundle for Yii2 with Font Awesome http://forta...

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.

Code Status

Support

Fontawesome version

Version of font-awesome

Version of extension

4.*

~2.17

5.*

~3.0

Update to 3.2

Be careful in version 3.2 rmrevin\yii\fontawesome\AssetBundle package use cdn by default. More in the changelog.

Update to 3.0

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

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:~3.5"

or add

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

to the require section of your composer.json file.

Usage with fa pro version

CDN

Add CdnProAssetBundle as depends of your app asset bundle:

class AppAsset extends AssetBundle

{

// ...

public $depends = [

// ...

'rmrevin\yii\fontawesome\CdnProAssetBundle'

];

}

Or inject CdnProAssetBundle in your view:

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

NPM

Install npm package of font:

npm install @fortawesome/fontawesome-pro

or

yarn add @fortawesome/fontawesome-pro

And add NpmProAssetBundle as depends of your app asset bundle:

class AppAsset extends AssetBundle

{

// ...

public $depends = [

// ...

'rmrevin\yii\fontawesome\NpmProAssetBundle'

];

}

Or inject NpmProAssetBundle in your view:

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

Optional

In order for do not install the free version of the font-awesome package, you can add it to the replace section of composer.json.

"replace": {

"fortawesome/font-awesome": "*"

},

Usage with fa free version

CDN

Add CdnFreeAssetBundle as depends of your app asset bundle:

class AppAsset extends AssetBundle

{

// ...

public $depends = [

// ...

'rmrevin\yii\fontawesome\CdnFreeAssetBundle'

];

}

Or inject CdnFreeAssetBundle in your view:

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

Composer

Free version of package fortawesome/font-awesome already installed in vendor.

Add NpmFreeAssetBundle as depends of your app asset bundle:

class AppAsset extends AssetBundle

{

// ...

public $depends = [

// ...

'rmrevin\yii\fontawesome\NpmFreeAssetBundle'

];

}

Or inject NpmFreeAssetBundle in your view:

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

Class reference

Namespace: rmrevin\yii\fontawesome;

Class FAB, FAL, FAR, FAS or FontAwesome

static FAR::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 FAR::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

(string)$Icon - render icon

$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

(string)$Stack - render icon stack

$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\FAS;

// or (only in pro version https://fontawesome.com/pro)

// use rmrevin\yii\fontawesome\FAR;

// use rmrevin\yii\fontawesome\FAL;

// use rmrevin\yii\fontawesome\FAB;

// normal use

echo FAS::icon('home'); //

// shortcut

echo FAS::i('home'); //

// icon with additional attributes

echo FAS::icon(

'arrow-left',

['class' => 'big', 'data-role' => 'arrow']

); //

// icon in button

echo Html::submitButton(

Yii::t('app', '{icon} Save', ['icon' => FAS::icon('check')])

); // Save

// icon with additional methods

echo FAS::icon('cog')->inverse(); //

echo FAS::icon('cog')->spin(); //

echo FAS::icon('cog')->fixedWidth(); //

echo FAS::icon('cog')->li(); //

echo FAS::icon('cog')->border(); //

echo FAS::icon('cog')->pullLeft(); //

echo FAS::icon('cog')->pullRight(); //

// icon size

echo FAS::icon('cog')->size(FAS::SIZE_3X);

// values: FAS::SIZE_LARGE, FAS::SIZE_2X, FAS::SIZE_3X, FAS::SIZE_4X, FAS::SIZE_5X

//

// icon rotate

echo FAS::icon('cog')->rotate(FAS::ROTATE_90);

// values: FAS::ROTATE_90, FAS::ROTATE_180, FAS::ROTATE_180

//

// icon flip

echo FAS::icon('cog')->flip(FAS::FLIP_VERTICAL);

// values: FAS::FLIP_HORIZONTAL, FAS::FLIP_VERTICAL

//

// icon with multiple methods

echo FAS::icon('cog')

->spin()

->fixedWidth()

->pullLeft()

->size(FAS::SIZE_LARGE);

//

// icons stack

echo FAS::stack()

->icon('twitter')

->on('square-o');

//

//

//

//

// icons stack with additional attributes

echo FAS::stack(['data-role' => 'stacked-icon'])

->on(FAS::Icon('square')->inverse())

->icon(FAS::Icon('cog')->spin());

//

//

//

//

// Stacking text and icons

echo FAS::stack()

->on(FAS::Icon('square'))

->text('1');

//

//

// 1

//

// Stacking text and icons with options

echo FAS::stack()

->on(FAS::Icon('square'))

->text('1', ['tag'=>'strong', 'class'=>'stacked-text']);

//

//

// 1

//

// Now you can add some css for vertical text positioning:

.stacked-text { margin-top: .3em; }

// unordered list icons

echo FAS::ul(['data-role' => 'unordered-list'])

->item('Bullet item', ['icon' => 'circle'])

->item('Checked item', ['icon' => 'check']);

//

//

Bullet item

//

Checked Item

//

// autocomplete icons name in IDE

echo FAS::icon(FAS::_COG);

echo FAS::icon(FAS::_DESKTOP);

echo FAS::stack()

->on(FAS::_CIRCLE_O)

->icon(FAS::_TWITTER);