sjaakp/yii2-symbol-picker

Widget to select Font Awesome symbol for Yii2.

Yii2 Symbol Picker

Widget to select a symbol from the Font Awesome collection for Yii 2.0 PHP Framework.

SymbolPicker lets you select the class name for a symbol in Font Awesome (up to version 4.3). It also lets you select class names for a color and for an additional effect., _(*1)

A demonstration of SymbolPicker widget is here., _(*2)

Prerequisite

SymbolPicker only makes sense if Font Awesome is loaded in your site. The easiest way to achieve this, is to add a line to the css property of the site's AppAsset.php file (look into the assets directory), like so:, _(*3)

<?php
class AppAsset extends AssetBundle
{
    public $css = [
        '//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css',
        'css/site.css'
        ... // other css files
    ];
    ... 
}
?>

There are other methods to make Font Awesome available to your site., _(*4)

Notice that SymbolPicker in its current form will not work with FontAwesome 5.0 and higher., _(*5)

Installation

The preferred way to install SymbolPicker is through Composer. Either add the following to the require section of your composer.json file:, _(*6)

"sjaakp/yii2-symbol-picker": "*", _(*7)

Or run:, _(*8)

composer require sjaakp/yii2-symbol-picker "*", _(*9)

You can manually install SymbolPicker by downloading the source in ZIP-format., _(*10)

Using SymbolPicker

SymbolPicker is a Yii 2.0 InputWidget. Like any other InputWidget it can be associated with a model and an attribute (or with a name and a value)., _(*11)

Symbolpicker is in namespace sjaakp\symbolpicker., _(*12)

For instance, to associate SymbolPicker with the attribute 'icon' in a form view, use code like this:, _(*13)

use sjaakp\symbolpicker\SymbolPicker;

...
<?= $form->field($model, 'icon')->widget(SymbolPicker::class) ?>
...

options

SymbolPicker runs 'out of the box'. It has the following options to modify it's behaviour:, _(*14)

• labels: list of labels used by the widget. If a label is set to false, the corresponding element is not rendered.
• icons: list of selectable Font Awesome icons. Each item is the class name of an icon, without the 'fa-' part. So, for instance 'calculator' refers to the 'fa-calculator' icon. Default: all of the Font Awesome icons, excluding the aliases. Version 4.3. See: http://fontawesome.io/icons/.
• colors: list of selectable colors. Each item is a color name, which will generate a 'col-***' color class name. For instance 'darkblue' refers to the class name 'col-darkblue'. Default: a selection of CSS3 named colors.
• effects: list of selectable Font Awesome effects. Each item is the class name of an effect, without the 'fa-' part. So, for instance 'flip-horizontal' refers to the 'fa-flip-horizontal' effect. Default: most of the Font Awesome effects. Version 4.3.See: http://fontawesome.io/examples/#rotated-flipped.
• buttonOptions: array of HTML options for the dropdown buttons. Default: [] (empty array). You may use this to set the CSS class of the buttons.

Of coarse, SymbolPicker also has the normal InputWidget properties., _(*15)

Color classes

CSS color classes for all the CSS3 named colors are in the file assets\symbol-colors.css. You may use this in other parts of your project., _(*16)