Yii 2 IcoFont Asset Bundle

, _(*1)

This extension provides a assets bundle with IcoFont for Yii framework 2.0 applications and helper to use icons., _(*2)

Installation

The preferred way to install this extension is through composer., _(*3)

Either run, _(*4)

composer require "loveorigami/yii2-icofont:*"

or add, _(*5)

"loveorigami/yii2-icofont": "*",

to the require section of your composer.json file., _(*6)

Usage

In view, _(*7)

lo\icofont\IcoFontAsset::register($this);

or as dependency in your main application asset bundle, _(*8)

class AppAsset extends AssetBundle
{
    // ...

    public $depends = [
        // ...
        'lo\icofont\IcoFontAsset'
    ];
}

IcoFont (FI) helper examples

use lo\icofont\FI;

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

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

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

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

// icon with additional methods
echo FI::icon('arrow-right')->inverse();    // <i class="icofont icofont-arrow-right icofont-inverse"></i>
echo FI::icon('spinner')->spin();           // <i class="icofont icofont-spinner icofont-spin"></i>
echo FI::icon('home')->fixedWidth();        // <i class="icofont icofont-home icofont-fw"></i>
echo FI::icon('home')->li();                // <i class="icofont icofont-home icofont-li"></i>
echo FI::icon('home')->border();            // <i class="icofont icofont-home icofont-border"></i>
echo FI::icon('arrow-right')->pullLeft();   // <i class="icofont icofont-arrow-right icofont-pull-left"></i>
echo FI::icon('arrow-right')->pullRight();  // <i class="icofont icofont-arrow-right icofont-pull-right"></i>

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

// icon rotate
echo FI::icon('adjust')->rotate(FI::ROTATE_90); 
// values: FI::ROTATE_90, FI::ROTATE_180, FI::ROTATE_180
// <i class="icofont icofont-adjust icofont-rotate-90"></i>

// icon flip
echo FI::icon('adjust')->flip(FI::FLIP_VERTICAL); 
// values: FI::FLIP_HORIZONTAL, FI::FLIP_VERTICAL
// <i class="icofont icofont-adjust icofont-flip-vertical"></i>

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

// icons stack
echo FI::stack()
        ->on('square')
        ->icon('shield');
// <span class="icofont-stack">
//   <i class="icofont icofont-shield icofont-stack-2x"></i>
//   <i class="icofont icofont-square icofont-stack-1x"></i>
// </span>

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

// unordered list icons 
echo FI::ul(['data-role' => 'unordered-list'])
    ->item('spinner', 'Bullet item')
    ->item('check', 'Checked item');
// 

<

ul class="icofont-ul" data-role="unordered-list">
//   <li><i class="icofont icofont-spinner icofont-li"></i>Bullet item</li>
//   <li><i class="icofont icofont-check icofont-li"></i>Checked Item</li>
// </span>

// autocomplete icons name in IDE
echo FI::icon(FI::_MAGIC);
echo FI::icon(FI::_ARROW_RIGHT);
echo FI::stack()
     ->on(FI::_SQUARE)
     ->icon(FI::_SHIELD);