This is the first step to setting up the icon framework for your application. The Icon::map method allows you to initialize assets for a specific icon framework in your view. The parameters available for this method are:

• view: The view object to initialize this framework. Usually you would set it to $this when calling within a view or view layout file.

• framework: The icon-framework identifier to map to the view.

  You can use one of the Icon framework constants below:
  • Icon::BSG or "bsg" for Bootstrap Glyphicons
  • Icon::FA or "fa" for Font Awesome Icons
  • Icon::FAS or "fas" for Font Awesome 5.x Solid Icons
  • Icon::FAR or "far" for Font Awesome 5.x Regular Icons
  • Icon::FAB or "fab" for Font Awesome 5.x Brand Icons
  • Icon::FAL or "fal" for Font Awesome 5.x Light Icons (not available free)
  • Icon::UNI or "uni" for Krajee Uni Icons
  • Icon::EL or "el" for Elusive Icons
  • Icon::TYP or "typ" for Typicons
  • Icon::WHHG or "whhg" for Web Hosting Hub Glyphs
  • Icon::JUI or "jui" for JQuery UI Icons
  • Icon::SI or "si" for Socicon
  • Icon::OCT or "oct" for Github Octicons
  • Icon::FI or "fi" for Flag Icons
  • Icon::OI or "oi" for Open Iconic Icons

View details or watch a complete demo

use kartik\icons\Icon;

// Initialize framework as per <code>icon-framework</code> param in Yii config
Icon::map($this);

// Initialize a specific framework - e.g. Web Hosting Hub Glyphs 
Icon::map($this, Icon::WHHG);

The Icon::show method allows you to display an icon anywhere in your application, after you have initialized and mapped the related framework with Icon::map. The parameters available for this method are:

• name, string, the name part of the icon without any prefixes.

• options, array, the HTML attributes for the icon container. The following special options are recognized:

  • framework, string, the icon framework name. If not set, will default to the icon-framework param set in Yii Configuration file. Will throw an InvalidConfigException if neither of the two is available. Use one of the icon framework constants as mentioned in the Map Icon section.

  • space, boolean, whether to add a space after the icon. Defaults to true.

  • tag, string, the HTML tag for the icon container. Defaults to i.

use kartik\icons\Icon;

// Display icon based on `icon-framework` param in Yii config
echo Icon::show('user');

// Display icon specific to Font Awesome framework with icon options
echo Icon::show('leaf', ['class' => 'fa-3x', 'framework' => Icon::FAS]);

The Icon::showStack method allows you to display stacked icons as supported in frameworks like Font Awesome. Similar to the Icon::show method, this method is to be used after you have initialized and mapped the related framework with Icon::map. The parameters available for this method are:

• name1, string, the name part of the icon in stack 1x.

• name2, string, the name part of the icon in stack 2x.

• options, array, the HTML attributes for the icon stack container. The following special options are recognized:

  • invert, boolean, whether to invert the order of stack 2x and 1x and place stack-1x before stack-2x. Defaults to false.

  • prefix, string, the CSS prefix string for the icon stack container. Defaults to fa-stack.

  • tag, string, the HTML tag for the icon stack container. Defaults to span.

  • space, boolean, whether to add a space after the icon. Defaults to true.

• options1, array, the HTML attributes for the icon stack 1x. The following special options are recognized:

  • framework, string, the icon framework name. If not set, will default to the icon-framework param set in Yii Configuration file. Will throw an InvalidConfigException if neither of the two is available.

  • space, boolean, whether to add a space after the icon. Defaults to true.

  • tag, string, the HTML tag for the icon container. Defaults to i.

• options2, array, the HTML attributes for the icon stack 2x. The following special options are recognized:

  • framework, string, the icon framework name. If not set, will default to the icon-framework param set in Yii Configuration file. Will throw an InvalidConfigException if neither of the two is available.

  • space, boolean, whether to add a space after the icon. Defaults to true.

  • tag, string, the HTML tag for the icon container. Defaults to i.

use kartik\icons\Icon;
// fa-flag on fa-circle
Icon::showStack('circle', 'flag', ['class'=>'fa-lg'], ['class'=>'fa-inverse']);

// fa-terminal on fa-square
Icon::showStack('square', 'terminal', ['class'=>'fa-lg'], ['class'=>'fa-inverse']);

// fa-twitter on fa-square using font awesome brand icons
Icon::showStack('twitter', 'square', ['class'=>'fa-lg'], ['framework' => Icon::FAB], ['framework' => Icon::FAR]);

// fa-ban on fa-camera (inverted)
Icon::showStack('camera', 'ban', ['invert' => true, 'class' => 'fa-lg'], [], ['class' => 'text-danger']);

The Icon::showLayers method allows you to display icon layers, text, and counters as supported in frameworks like Font Awesome.

NOTE: This feature is available only for Font Awesome icons if you use the SVG/JS vector version of Font Awesome, i.e. kartik\icons\FontAwesomeAsset.

Similar to the Icon::show method, this method is to be used after you have initialized and mapped the related framework with Icon::map. The parameters available for this method are:

• items, array, configuration of the icon layers as a multidimensional array. Each item in the list must be setup as an array consisting of the following key settings:

  • name, string, the name part of the icon if you need to render an icon.

  • text, string, the text to display instead of the icon. One of text or name must be set.

  • framework, string, the icon framework name. If not set will default to Icon::FAS. You must have initialized the relevant icon assets on your page via Icon::map. Will throw an InvalidConfigException if the framework set is invalid.

  • tag, string, the HTML tag for the icon item. Defaults to i for non-text layers and span for text layers.

  • options, array, the HTML attributes for the icon layer item container. The following special options are recognized.

• options, array, the HTML attributes for the icon layers main container. Will always have the CSS classes fa-layers and fa-fw added. The following special options are recognized:

  • space, boolean, whether to add a space after the icon. Defaults to true.

  • tag, string, the HTML tag for the icon container. Defaults to span.

use kartik\icons\Icon;
<div class="fa-4x">
<?=
    Icon::showLayers(
        [
            ['name' => 'circle', 'options' => ['style' => 'color:Tomato']], 
            ['name' => 'times', 'options' => ['class' => 'fa-inverse', 'data-fa-transform' => 'shrink-6']], 
        ],
        ['style' => 'background:MistyRose']
    ) . 
    Icon::showLayers(
        [
            ['name' => 'bookmark'], 
            ['name' => 'heart', 'options' => ['style' => 'color:Tomato', 'data-fa-transform' => 'shrink-10 up-2']], 
        ],
       ['style' => 'background:MistyRose']
    ) . 
    Icon::showLayers(
        [
            ['name' => 'play', 'options' => ['data-fa-transform' => 'rotate--90 grow-2']], 
            ['name' => 'sun', 'options' => ['class' => 'fa-inverse', 'data-fa-transform' => 'shrink-10 up-2']], 
            ['name' => 'moon', 'options' => ['class' => 'fa-inverse', 'data-fa-transform' => 'shrink-11 down-4.2 left-4']], 
            ['name' => 'star', 'options' => ['class' => 'fa-inverse', 'data-fa-transform' => 'shrink-11 down-4.2 right-4']], 
        ],
       ['style' => 'background:MistyRose']
    ) . 
    Icon::showLayers(
        [
            ['name' => 'calendar'], 
            ['text' => '27', 'options' => ['class' => 'fa-layers-text fa-inverse', 'style' => 'font-weight:900', 'data-fa-transform' => 'shrink-8 down-3']],
        ],
       ['style' => 'background:MistyRose']
    ) .
    Icon::showLayers(
        [
            ['name' => 'certificate'], 
            ['text' => 'NEW', 'options' => ['class' => 'fa-layers-text fa-inverse', 'style' => 'font-weight:900', 'data-fa-transform' => 'shrink-11.5 rotate--30']],
        ],
       ['style' => 'background:MistyRose']
    ) .
    Icon::showLayers(
        [
            ['name' => 'envelope'], 
            ['text' => '1,419', 'options' => ['class' => 'fa-layers-counter', 'style' => 'background:Tomato']],
        ],
       ['style' => 'background:MistyRose']
    );
?>
</div>