rmrevin / yii2-fontawesome
Asset Bundle for Yii2 with Font Awesome
Installs: 3 403 782
Dependents: 174
Suggesters: 12
Security: 0
Stars: 149
Watchers: 16
Forks: 50
Open Issues: 5
Type:yii2-extension
Requires
- php: >=5.4.0
- fortawesome/font-awesome: ^5.15.0
- yiisoft/yii2: ^2.0.0
Requires (Dev)
- doctrine/instantiator: 1.0.*
- phpdocumentor/reflection-docblock: ~3.1.0
- phpunit/phpunit: ^6.0
- dev-master
- 3.x-dev
- 3.7.0
- 3.6.0
- 3.5.0
- 3.4.0
- 3.3.0
- 3.2.0
- 3.1.0
- 3.0.0
- 2.x-dev
- 2.17.1
- 2.17.0
- 2.16.1
- 2.16.0
- 2.15.2
- 2.15.1
- 2.15.0
- 2.14.0
- 2.13.0
- 2.12.2
- 2.12.1
- 2.12.0
- 2.11.0
- 2.10.3
- 2.10.2
- 2.10.1
- 2.10.0
- 2.9.2
- 2.9.1
- 2.9.0
- 2.8.2
- 2.8.1
- 2.8.0
- 2.7.1
- 2.7.0
- 2.6.2
- 2.6.1
- 2.6.0
- 2.5.0
- 2.4.2
- 2.4.1
- 2.4.0
- 2.3.0
- 2.2.1
- 2.2.0
- 2.1.1
- 2.1.0
- 2.0.2
- 2.0.1
- 2.0.0
- 1.2.1
- 1.2.0
- 1.1.2
- 1.1.1
- 1.1.0
- 1.0.3
- 1.0.2
- 1.0.1
- 1.0.0
- dev-dependabot/composer/yiisoft/yii2-2.0.47
- dev-preview
This package is auto-updated.
Last update: 2024-11-30 01:36:38 UTC
README
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
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
Register your domain here - https://fontawesome.com/how-to-use/on-the-web/setup/getting-started
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 ancomponent\Icon
that can be used to FontAwesome html icon$name
- name of icon in font awesome set.$options
- additional attributes fori.fa
html tag.
static FAR::stack($name, $options=[])
- Creates ancomponent\Stack
that can be used to FontAwesome html icon$options
- additional attributes forspan.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 classfa-inverse
$Icon->spin()
- add to html tag css classfa-spin
$Icon->fixedWidth()
- add to html tag css classfa-fw
$Icon->ul()
- add to html tag css classfa-ul
$Icon->li()
- add to html tag css classfa-li
$Icon->border()
- add to html tag css classfa-border
$Icon->pullLeft()
- add to html tag css classpull-left
$Icon->pullRight()
- add to html tag css classpull-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 orcomponent\Icon
object$options
- additional attributes for icon html tag.
$Stack->icon($icon, $options=[])
- set background icon for stack$icon
- name of icon orcomponent\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'); // <i class="fas fa-home"></i> // shortcut echo FAS::i('home'); // <i class="fas fa-home"></i> // icon with additional attributes echo FAS::icon( 'arrow-left', ['class' => 'big', 'data-role' => 'arrow'] ); // <i class="big fas fa-arrow-left" data-role="arrow"></i> // icon in button echo Html::submitButton( Yii::t('app', '{icon} Save', ['icon' => FAS::icon('check')]) ); // <button type="submit"><i class="fas fa-check"></i> Save</button> // icon with additional methods echo FAS::icon('cog')->inverse(); // <i class="fas fa-cog fa-inverse"></i> echo FAS::icon('cog')->spin(); // <i class="fas fa-cog fa-spin"></i> echo FAS::icon('cog')->fixedWidth(); // <i class="fas fa-cog fa-fw"></i> echo FAS::icon('cog')->li(); // <i class="fas fa-cog fa-li"></i> echo FAS::icon('cog')->border(); // <i class="fas fa-cog fa-border"></i> echo FAS::icon('cog')->pullLeft(); // <i class="fas fa-cog pull-left"></i> echo FAS::icon('cog')->pullRight(); // <i class="fas fa-cog pull-right"></i> // 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 // <i class="fas fa-cog fa-size-3x"></i> // icon rotate echo FAS::icon('cog')->rotate(FAS::ROTATE_90); // values: FAS::ROTATE_90, FAS::ROTATE_180, FAS::ROTATE_180 // <i class="fas fa-cog fa-rotate-90"></i> // icon flip echo FAS::icon('cog')->flip(FAS::FLIP_VERTICAL); // values: FAS::FLIP_HORIZONTAL, FAS::FLIP_VERTICAL // <i class="fas fa-cog fa-flip-vertical"></i> // icon with multiple methods echo FAS::icon('cog') ->spin() ->fixedWidth() ->pullLeft() ->size(FAS::SIZE_LARGE); // <i class="fas fa-cog fa-spin fa-fw pull-left fa-size-lg"></i> // icons stack echo FAS::stack() ->icon('twitter') ->on('square-o'); // <span class="fa-stack"> // <i class="fas fa-square-o fa-stack-2x"></i> // <i class="fas fa-twitter fa-stack-1x"></i> // </span> // icons stack with additional attributes echo FAS::stack(['data-role' => 'stacked-icon']) ->on(FAS::Icon('square')->inverse()) ->icon(FAS::Icon('cog')->spin()); // <span class="fa-stack" data-role="stacked-icon"> // <i class="fas fa-square-o fa-inverse fa-stack-2x"></i> // <i class="fas fa-cog fa-spin fa-stack-1x"></i> // </span> // Stacking text and icons echo FAS::stack() ->on(FAS::Icon('square')) ->text('1'); // <span class="fa-stack"> // <i class="fas fa-square fa-stack-2x"></i> // <span class="fa-stack-1x">1</span> // </span> // Stacking text and icons with options echo FAS::stack() ->on(FAS::Icon('square')) ->text('1', ['tag'=>'strong', 'class'=>'stacked-text']); // <span class="fa-stack"> // <i class="fas fa-square fa-stack-2x"></i> // <strong class="stacked-text fa-stack-1x">1</strong> // </span> // 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']); // <ul class="fa-ul" data-role="unordered-list"> // <li><i class="fas fa-circle fa-li"></i>Bullet item</li> // <li><i class="fas fa-check fa-li"></i>Checked Item</li> // </span> // 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);