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, to configure the HTML options for the icon containerframework, 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 iNot seeing the updated content on this page! Hard refresh your browser to clean cache for this page (e.g. SHIFT-F5 on Windows Chrome)
For more examples and usage details visit the Bootstrap Glyphicons Page.
NOTE This extension does not explicitly load glyphicons on the page. For Bootstrap 5.x / 4.x / 3.x versions of Yii2 apps, glyphicons are bundled with the Bootstrap 5.x / 4.x / 3.x library and will be displayed automatically. For Bootstrap 5.x / 4.x versions, you need to explicitly load glyphicons CSS on your page in order to render glyphicons.
<?= Icon::show('music', ['framework' => Icon::BSG]) ?> Music<br>
<?= Icon::show('user', ['framework' => Icon::BSG]) ?> User<br>
<?= Icon::show('home', ['framework' => Icon::BSG]) ?> Home<br>
<?= Icon::show('inbox', ['framework' => Icon::BSG]) ?> Inbox<br>
<?= Icon::show('send', ['framework' => Icon::BSG]) ?> Send<br>
<?= Icon::show('adjust', ['framework' => Icon::BSG]) ?> Adjust<br>
<?= Icon::show('tint', ['framework' => Icon::BSG]) ?> Tint<br>
<?= Icon::show('plane', ['framework' => Icon::BSG]) ?> Plane<br>
<?= Icon::show('shopping-cart', ['framework' => Icon::BSG]) ?> Shopping Cart<br>
<?= Icon::show('bullhorn', ['framework' => Icon::BSG]) ?> Bullhorn<br>
/*
* `icon-framework` param is set to 'fa' in Yii Config
*/
// Inline icons
echo Icon::show('twitter-square', ['framework' => Icon::FAB]) . 'Twitter' .
Icon::show('facebook-square', ['framework' => Icon::FAB]) . 'Facebook' .
Icon::show('google-plus-square', ['framework' => Icon::FAB]) . 'Google+';
// Icons & sizes
echo Icon::show('camera-retro') . 'normal' .
Icon::show('camera-retro', ['class'=>'fa-lg']) . 'fa-lg' .
Icon::show('camera-retro', ['class'=>'fa-2x']) . 'fa-2x' .
Icon::show('camera-retro', ['class'=>'fa-3x']) . ' fa-3x';
Icon::show('camera-retro', ['class'=>'fa-4x']) . ' fa-4x';
// Rotated/Flipped Icons
echo Icon::show('shield-alt') . 'normal' .
Icon::show('shield-alt', ['class'=>'fa-rotate-90']) . 'fa-rotate-90' .
Icon::show('shield-alt', ['class'=>'fa-flip-horizontal']) . 'fa-flip-horizontal';
// Spinning Icons in Buttons
echo Html::button(Icon::show('spinner', ['class'=>'fa-spin']), ['class'=>'btn btn-outline-secondary']) . ' ' .
Html::button(Icon::show('sync-alt', ['class'=>'fa-spin']), ['class'=>'btn btn-outline-secondary']) . ' ' .
Html::button(Icon::show('cog', ['class'=>'fa-spin']), ['class'=>'btn btn-outline-secondary']);
<?= Icon::show('poison', ['framework' => Icon::UNI]) ?> Poison<br>
<?= Icon::show('watch', ['framework' => Icon::UNI]) ?> Watch<br>
<?= Icon::show('hourglass', ['framework' => Icon::UNI]) ?> Hourglass<br>
<?= Icon::show('spades', ['framework' => Icon::UNI]) ?> Spades<br>
<?= Icon::show('hearts', ['framework' => Icon::UNI]) ?> Hearts<br>
<?= Icon::show('chess-king', ['framework' => Icon::UNI]) ?> Chess King<br>
<?= Icon::show('chess-queen', ['framework' => Icon::UNI]) ?> Chess Queen<br>
<?= Icon::show('chess-rook', ['framework' => Icon::UNI]) ?> Chess Rook<br>
<?= Icon::show('chess-knight', ['framework' => Icon::UNI]) ?> Chess Knight<br>
<?= Icon::show('chess-pawn', ['framework' => Icon::UNI]) ?> Chess Pawn
<?= Icon::show('wrench', ['framework' => Icon::EL]) ?> Wrench<br>
<?= Icon::show('wheelchair', ['framework' => Icon::EL]) ?> Wheelchair<br>
<?= Icon::show('website', ['framework' => Icon::EL]) ?> Website<br>
<?= Icon::show('w3c', ['framework' => Icon::EL]) ?> W3C<br>
<?= Icon::show('volume-off', ['framework' => Icon::EL]) ?> Volume Off<br>
<?= Icon::show('wordpress', ['framework' => Icon::EL]) ?> Wordpress<br>
<?= Icon::show('website-alt', ['framework' => Icon::EL]) ?> Website Alt<br>
<?= Icon::show('warning-sign', ['framework' => Icon::EL]) ?> Warning Sign<br>
<?= Icon::show('volume-up', ['framework' => Icon::EL]) ?> Volume Up<br>
<?= Icon::show('volume-down', ['framework' => Icon::EL]) ?> Volume Down
<?= Icon::show('adjust-brightness', ['framework' => Icon::TYP]) ?> adjust-brightness<br>
<?= Icon::show('adjust-contrast', ['framework' => Icon::TYP]) ?> adjust-contrast<br>
<?= Icon::show('anchor-outline', ['framework' => Icon::TYP]) ?> anchor-outline<br>
<?= Icon::show('anchor', ['framework' => Icon::TYP]) ?> anchor<br>
<?= Icon::show('archive', ['framework' => Icon::TYP]) ?> archive<br>
<?= Icon::show('arrow-back', ['framework' => Icon::TYP]) ?> arrow-back<br>
<?= Icon::show('arrow-down', ['framework' => Icon::TYP]) ?> arrow-down<br>
<?= Icon::show('arrow-up', ['framework' => Icon::TYP]) ?> arrow-up<br>
<?= Icon::show('arrow-forward', ['framework' => Icon::TYP]) ?> arrow-forward<br>
<?= Icon::show('arrow-loop', ['framework' => Icon::TYP]) ?> arrow-loop
<?= Icon::show('bitcoin', ['framework' => Icon::WHHG]) ?> bitcoin<br>
<?= Icon::show('calcdivide', ['framework' => Icon::WHHG]) ?> calcdivide<br>
<?= Icon::show('calcequals', ['framework' => Icon::WHHG]) ?> calcequals<br>
<?= Icon::show('calcminus', ['framework' => Icon::WHHG]) ?> calcminus<br>
<?= Icon::show('calcmultiply', ['framework' => Icon::WHHG]) ?> calcmultiply<br>
<?= Icon::show('bank', ['framework' => Icon::WHHG]) ?> bank<br>
<?= Icon::show('bill', ['framework' => Icon::WHHG]) ?> bill<br>
<?= Icon::show('cartalt', ['framework' => Icon::WHHG]) ?> cartalt<br>
<?= Icon::show('coinsalt', ['framework' => Icon::WHHG]) ?> coinsalt<br>
<?= Icon::show('desklamp', ['framework' => Icon::WHHG]) ?> desklamp
<?= Icon::show('folder-collapsed', ['framework' => Icon::JUI]) ?> folder-collapsed<br>
<?= Icon::show('folder-open', ['framework' => Icon::JUI]) ?> folder-open<br>
<?= Icon::show('document', ['framework' => Icon::JUI]) ?> document<br>
<?= Icon::show('document-b', ['framework' => Icon::JUI]) ?> document-b<br>
<?= Icon::show('note', ['framework' => Icon::JUI]) ?> note<br>
<?= Icon::show('mail-closed', ['framework' => Icon::JUI]) ?> mail-closed<br>
<?= Icon::show('mail-open', ['framework' => Icon::JUI]) ?> mail-open<br>
<?= Icon::show('suitcase', ['framework' => Icon::JUI]) ?> suitcase<br>
<?= Icon::show('comment', ['framework' => Icon::JUI]) ?> comment<br>
<?= Icon::show('print', ['framework' => Icon::JUI]) ?> print
<?= Icon::show('twitter', ['framework' => Icon::SI]) ?> twitter<br>
<?= Icon::show('facebook', ['framework' => Icon::SI]) ?> facebook<br>
<?= Icon::show('google', ['framework' => Icon::SI]) ?> google+<br>
<?= Icon::show('linkedin', ['framework' => Icon::SI]) ?> linkedin<br>
<?= Icon::show('yahoo', ['framework' => Icon::SI]) ?> yahoo<br>
<?= Icon::show('youtube', ['framework' => Icon::SI]) ?> youtube<br>
<?= Icon::show('pinterest', ['framework' => Icon::SI]) ?> pinterest<br>
<?= Icon::show('skype', ['framework' => Icon::SI]) ?> skype<br>
<?= Icon::show('wordpress', ['framework' => Icon::SI]) ?> wordpress<br>
<?= Icon::show('stumbleupon', ['framework' => Icon::SI]) ?> stumbleupon<br>
<?= Icon::show('beer', ['class'=>'mega-octicon', 'framework' => Icon::OCT]) ?>
<?= Icon::show('bug', ['class'=>'mega-octicon', 'framework' => Icon::OCT]) ?>
<?= Icon::show('organization', ['class'=>'mega-octicon', 'framework' => Icon::OCT]) ?>
<?= Icon::show('squirrel', ['class'=>'mega-octicon', 'framework' => Icon::OCT]) ?>
<?= Icon::show('telescope', ['class'=>'mega-octicon', 'framework' => Icon::OCT]) ?>
<?= Icon::show('broadcast', ['class'=>'mega-octicon', 'framework' => Icon::OCT]) ?>
<?= Icon::show('file-media', ['class'=>'mega-octicon', 'framework' => Icon::OCT]) ?>
<?= Icon::show('fold', ['class'=>'mega-octicon', 'framework' => Icon::OCT]) ?>
<?= Icon::show('milestone', ['class'=>'mega-octicon', 'framework' => Icon::OCT]) ?>
<?= Icon::show('radio-tower', ['class'=>'mega-octicon', 'framework' => Icon::OCT]) ?>
<?= Icon::show('in', ['framework' => Icon::FI]) ?> India<br>
<?= Icon::show('gb', ['framework' => Icon::FI]) ?> Great Britian<br>
<?= Icon::show('us', ['framework' => Icon::FI]) ?> United States<br>
<?= Icon::show('de', ['framework' => Icon::FI]) ?> Germany<br>
<?= Icon::show('ru', ['framework' => Icon::FI]) ?> Russia<br>
<?= Icon::show('au', ['framework' => Icon::FI]) ?> Australia<br>
<?= Icon::show('cn', ['framework' => Icon::FI]) ?> China<br>
<?= Icon::show('my', ['framework' => Icon::FI]) ?> Malaysia<br>
<?= Icon::show('it', ['framework' => Icon::FI]) ?> Italy<br>
<?= Icon::show('ca', ['framework' => Icon::FI]) ?> Canada<br>
<?= Icon::show('aperture', ['framework' => Icon::OI]) ?> aperture<br>
<?= Icon::show('puzzle-piece', ['framework' => Icon::OI]) ?> puzzle-piece<br>
<?= Icon::show('people', ['framework' => Icon::OI]) ?> people<br>
<?= Icon::show('medical-cross', ['framework' => Icon::OI]) ?> medical-cross<br>
<?= Icon::show('credit-card', ['framework' => Icon::OI]) ?> credit-card<br>
<?= Icon::show('laptop', ['framework' => Icon::OI]) ?> laptop<br>
<?= Icon::show('graph', ['framework' => Icon::OI]) ?> graph<br>
<?= Icon::show('excerpt', ['framework' => Icon::OI]) ?> excerpt<br>
<?= Icon::show('copywriting', ['framework' => Icon::OI]) ?> copywriting<br>
<?= Icon::show('calculator', ['framework' => Icon::OI]) ?> calculator<br>
Comments & Discussion
Note
You can now visit the Krajee Webtips Q & A forum for searching OR asking questions OR helping programmers with answers on these extensions and plugins. For asking a question click here. Select the appropriate question category (i.e. Krajee Plugins) and choose this current page plugin in the question related to field.
The comments and discussion section below are intended for generic discussions or feedback for this plugin. Developers may not be able to search or lookup here specific questions or tips on usage for this plugin.