Skip to content
Font Awesome Icon Picker plugin for Twitter Bootstrap widget for Yii2.
Branch: master
Clone or download
Latest commit 335e318 May 2, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
tests/functional commit May 2, 2018
.gitattributes commit May 2, 2018
.scrutinizer.yml commit Jan 23, 2018
.travis.yml Add tests Jan 23, 2018
FontAwesomeAsset.php Update Jan 16, 2018
IconPicker.php commit May 2, 2018
IconPickerAsset.php Update Jan 16, 2018 commit May 2, 2018 commit May 2, 2018
composer.json commit May 2, 2018
phpunit.xml.dist commit Jan 23, 2018


Latest Stable Version License Build Status codecov Scrutinizer Code Quality Total Downloads PayPal donate button SensioLabsInsight

Renders a Font Awesome Icon Picker widget for Yii2.


The preferred way to install this extension is through composer.

Either run

php composer.phar require dominus77/yii2-fontawesome-iconpicker "*"

or add

"dominus77/yii2-fontawesome-iconpicker": "*"

to the require section of your composer.json file.


Once the extension is installed, simply use it in your code by :

use dominus77\iconpicker\IconPicker;

<?= $form->field($model, 'icon')->widget(IconPicker::className(), []); ?>

Client Options:

<?= $form->field($model, 'icon')->widget(IconPicker::className(), [
    'clientOptions' => [
        'title' => 'Font Awesome Icon', // Popover title (optional) only if specified in the template
        'selected' => false, // use this value as the current item and ignore the original
        'defaultValue' => false, // use this value as the current item if input or element value is empty
        'placement' => 'bottom', // (has some issues with auto and CSS). auto, top, bottom, left, right
        'collision' => 'none', // If true, the popover will be repositioned to another position when collapses with the window borders
        'animation' => true, // fade in/out on show/hide ?
        //hide iconpicker automatically when a value is picked. it is ignored if mustAccept is not false and the accept button is visible
        'hideOnSelect' => false,
        'showFooter' => false,
        'searchInFooter' => false, // If true, the search will be added to the footer instead of the title'
        'mustAccept' => false, // only applicable when there's an iconpicker-btn-accept button in the popover footer
        'selectedCustomClass' => 'bg-primary', // Appends this class when to the selected item
        //'icons' => [], // list of icon classes (declared at the bottom of this script for maintainability)
        'fullClassFormatter' => new \yii\web\JsExpression("function(val){return 'fa ' + val;}"),
        'input' => 'input,.iconpicker-input', // children input selector
        'inputSearch' => false, // use the input as a search box too?
        'container' => false, //  Appends the popover to a specific element. If not set, the selected element or element parent is used
        'component' => '.input-group-addon,.iconpicker-component', // children component jQuery selector or object, relative to the container element
        // Plugin templates:
        'templates' => [
            'popover' => '<div class="iconpicker-popover popover"><div class="arrow"></div><div class="popover-title"></div><div class="popover-content"></div></div>',
            'footer' => '<div class="popover-footer"></div>',
            'buttons' => '<button class="iconpicker-btn iconpicker-btn-cancel btn btn-default btn-sm">Cancel</button> <button class="iconpicker-btn iconpicker-btn-accept btn btn-primary btn-sm">Accept</button>',
            'search' => '<input type="search" class="form-control iconpicker-search" placeholder="Type to filter" />',
            'iconpicker' => '<div class="iconpicker"><div class="iconpicker-items"></div></div>',
            'iconpickerItem' => '<a role="button" href="#" class="iconpicker-item"><i></i></a>',
]); ?>

Further Information

Please, check the Font Awesome Icon Picker


The MIT License (MIT). Please see License File for more information.

Sensio Labs


You can’t perform that action at this time.