Yii 2 Icons

Latest Stable Version Latest Unstable Version Total Downloads Monthly Downloads Daily Downloads
Thankful to Krajee!
to get more out of us.

NOTE: This extension depends on the yiisoft/yii2-bootstrap and the yiisoft/yii2-jui extensions. Check the composer.json for this extension's requirements and dependencies that may be updated by composer.

The yii2-icons package offers an easy method to setup various icon frameworks and display icons within Yii Framework 2.0. It contains a single class Icon for calling and managing your application icons. Most popular free icon frameworks available are currently supported. The framework list may be extended in future based on larger demand and feedback. View a complete demo.

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. {$iconList}

    View details or watch a complete demo

    Call one/or both of the methods below in your view or view layout file. This will initialize the needed icon framework.
    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

  • framework, string, the icon framework for which this icon is to be displayed. Defaults to icon-framework param setting in Yii config. 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.

View a complete demo.
Call one of the methods below to display an icon specific to the framework.
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'], Icon::FA);

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

  • options1, array, the HTML attributes for the icon stack 1x

  • options2, array, the HTML attributes for the icon stack 2x

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

  • framework, string, the icon framework for which this icon is to be displayed. Defaults to icon-framework param setting in Yii config. 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.

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

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

  |     |     |  
use kartik\icons\Icon;
// fa-twitter on fa-square-o
Icon::showStack('twitter', 'square-o', ['class'=>'fa-lg']);

// 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-ban on fa-camera (inverted)
Icon::showStack('camera', 'ban', ['class'=>'fa-lg'], [], ['class'=>'text-danger'], true);