loveorigami / yii2-icofont
Asset Bundle for Yii2 with IcoFont http://icofont.com
Installs: 2 504
Dependents: 0
Suggesters: 0
Security: 0
Stars: 5
Watchers: 4
Forks: 2
Open Issues: 0
Language:CSS
Type:yii2-extension
Requires
- yiisoft/yii2: 2.*
This package is auto-updated.
Last update: 2024-10-21 21:02:02 UTC
README
This extension provides a assets bundle with IcoFont for Yii framework 2.0 applications and helper to use icons.
Installation
The preferred way to install this extension is through composer.
Either run
composer require "loveorigami/yii2-icofont:*"
or add
"loveorigami/yii2-icofont": "*",
to the require
section of your composer.json
file.
Usage
In view
lo\icofont\IcoFontAsset::register($this);
or as dependency in your main application asset bundle
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);
See also
License
loveorigami/yii2-icofont is released under the MIT License. See the bundled LICENSE.md
for details.