Yii 1.1: fontawesome

Introduces FontAwesome to Yii and extends Bootstrap-like extensions
10 followers

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:

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.

Total 1 comment

#13074 report it
akurnia at 2013/05/02 06:00am
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.

Leave a comment

Please to leave your comment.

Create extension