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.
A demonstration of SymbolPicker widget is here.
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:
<?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.
Notice that SymbolPicker in its current form will not work with FontAwesome 5.0 and higher.
The preferred way to install SymbolPicker is through Composer. Either add the following to the require section of your composer.json
file:
"sjaakp/yii2-symbol-picker": "*"
Or run:
composer require sjaakp/yii2-symbol-picker "*"
You can manually install SymbolPicker by downloading the source in ZIP-format.
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
).
Symbolpicker is in namespace sjaakp\symbolpicker
.
For instance, to associate SymbolPicker with the attribute 'icon'
in a form view, use code like this:
use sjaakp\symbolpicker\SymbolPicker;
...
<?= $form->field($model, 'icon')->widget(SymbolPicker::class) ?>
...
SymbolPicker runs 'out of the box'. It has the following options to modify it's behaviour:
false
, the corresponding element is not rendered.'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/.'col-***'
color class name. For instance 'darkblue'
refers to the class name 'col-darkblue'
. Default: a selection of CSS3 named colors.'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.[]
(empty array). You may use this to set the CSS class of the buttons.Of coarse, SymbolPicker also has the normal InputWidget properties.
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.
Comments