There are two main purposes for this extension (widget set).
First. If you're not using any extensions that install or uses Font Awesome in addition to main goal, you can enhance your projects with this fabulous icon library, using this extension. In this case, it is nothing else than EFontAwesome extension's clone (with some small fixes).
Second. For users of any Bootstrap-like extension (for example Yii-Booster, that already contains Font Awesome on-board, this extension brings extended version of TbButton
and TbButtonGroup
, that allows more customized and flexible use of icons in these buttons (set icon position and size plus enable icon animation).
In future release, this extension will contain also an extra widget FaIcon
, which allow to use Font Awesome icons inline or outside buttons and reuse rest of Font Awesome icons' features.
This extension is based on:
- TbButton by Christoffer Niska: http://www.cniska.net/yii-bootstrap/,
- Bootstrap button widget: http://twitter.github.com/bootstrap/base-css.html#buttons
Requirements ¶
This extension was created and tested with Yii 1.1.12. But it is so simple, that it should run without any problems on any earlier version of Yii.
Installation ¶
Unzip archive contents to your extensions
folder (usually /protected/extension
. Make sure, that all FontAwesome extension's files are placed in separate subfolder (/protected/extension/fontawesome
).
Add FontAwesome extension to your configuration file, to components
section:
'components'=>array
(
...
'fontawesome'=>array
(
'class'=>'ext.fontawesome.components.FontAwesome',
'publishAwesome'=>FALSE
)
Set publishAwesome
to FALSE
, if you don't want to publish Font Awesome assets files and you have other extension that is publishing necessary files and makes them available to application or you're doing this manually. Set thist to TRUE
or delete this line (use default setting) to force publishing of Font Awesome assets.
Include fontawesome
in your preload
array:
'preload'=>array
(
...
'fontawesome'
),
And you're done!
Usage ¶
Put for example <i class="icon-linkedin-sign icon-3x "></i>
in any of your views, to check and ensure, that Font Awesome is available for you.
Here is example, how to use extra properties of FaButton:
<?php $this->widget('fontawesome.widgets.FaButton', array
(
'label'=>'Primary',
'type'=>'primary',
'size'=>'large',
'icon'=>'cog',
'iconSize'=>'icon-4x',
'iconType'=>'icon-top',
'iconSpin'=>TRUE
)); ?>
For iconSize
and iconType
you can use the same values as described at Font Awesome website.
iconSpin
Hi there, i've been tried to spin the icon on button like the example, but why it can't spin the icon, the icon is display but can't spin.
Thanks.
HI, the icon is not displaying. please help
If you have any questions, please ask in the forum instead.
Signup or Login in order to comment.