Yii2-icon FontAwesome demo
FontAwesome raw SVG icons in Yii2
Yii2-icon renders icons from SVG symbols. This is the fastest and most efficient way to display icons in your view. Take a peek at the source HTML of this page to see how it works.
chess-queen: regular, solid
chess-queen: light, thin, duotone (pro only)
brands chrome
Code<?php use sjaakp\icon\Icon; ?> <p> <?= Icon::regular('chess-queen') ?> <?= Icon::solid('chess-queen') ?> chess-queen: regular, solid </p> <p> <?= Icon::light('chess-queen') ?> <?= Icon::thin('chess-queen') ?> <?= Icon::duotone('chess-queen') ?> chess-queen: light, thin, duotone (pro only) </p> <p><?= Icon::brands('chrome') ?> brands chrome</p>
solid arrow-down-long (aspect-ratio = 0.625)
solid bicycle (aspect-ratio = 1.25)
Code<?php use sjaakp\icon\Icon; ?> <p><?= Icon::solid('arrow-down-long', [ 'class' => 'bg-blue' ]) ?> solid arrow-down-long (aspect-ratio = 0.625)</p> <p><?= Icon::solid('bicycle', [ 'class' => 'bg-blue' ]) ?> solid bicycle (aspect-ratio = 1.25)</p>
solid bicycle, all blue
solid bicycle, icon blue
Code<?php use sjaakp\icon\Icon; ?> <p class="blue"><?= Icon::solid('bicycle') ?> solid bicycle, all blue</p> <p><?= Icon::solid('bicycle', [ 'class' => 'blue' ]) ?> solid bicycle, icon blue</p>
solid mug-hot, inverse
Code<?php use sjaakp\icon\Icon; ?> <p> <?= Icon::solid('mug-hot') ?> <span class="bg-blue"> <?= Icon::solid('mug-hot', [ 'class' => 'fa-inverse' ]) ?> </span> solid mug-hot, inverse </p>
solid mug-hot, fa-2xs ... fa-2xl
Code<?php use sjaakp\icon\Icon; ?> <p> <?= Icon::solid('mug-hot', [ 'class' => 'fa-2xs' ]) ?> <?= Icon::solid('mug-hot', [ 'class' => 'fa-xs' ]) ?> <?= Icon::solid('mug-hot', [ 'class' => 'fa-sm' ]) ?> <?= Icon::solid('mug-hot') ?> <?= Icon::solid('mug-hot', [ 'class' => 'fa-lg' ]) ?> <?= Icon::solid('mug-hot', [ 'class' => 'fa-xl' ]) ?> <?= Icon::solid('mug-hot', [ 'class' => 'fa-2xl' ]) ?> solid mug-hot, fa-2xs ... fa-2xl </p>
solid mug-hot, fa-1x, -2x, -3x, 7x, -10x
Code<?php use sjaakp\icon\Icon; ?> <p> <?= Icon::solid('mug-hot', [ 'class' => 'fa-1x' ]) ?> <?= Icon::solid('mug-hot', [ 'class' => 'fa-2x' ]) ?> <?= Icon::solid('mug-hot', [ 'class' => 'fa-3x' ]) ?> <?= Icon::solid('mug-hot', [ 'class' => 'fa-7x' ]) ?> <?= Icon::solid('mug-hot', [ 'class' => 'fa-10x' ]) ?> solid mug-hot, fa-1x, -2x, -3x, 7x, -10x </p>
normal, fixed width
Code<?php use sjaakp\icon\Icon; ?> <p> <?= Icon::solid('bicycle', [ 'class' => 'bg-blue' ]) ?> <?= Icon::solid('arrow-down-long', [ 'class' => 'bg-blue' ]) ?> <?= Icon::solid('bicycle', [ 'class' => 'fa-fw bg-blue' ]) ?> <?= Icon::solid('arrow-down-long', [ 'class' => 'fa-fw bg-blue' ]) ?> normal, fixed width </p>
List
- one
- two
- three
<?php use sjaakp\icon\Icon; ?> <h4>List</h3> <ul class="fa-ul"> <li><?= Icon::regular('square', [ 'class' => 'fa-li' ]) ?>one</li> <li><?= Icon::regular('square-check', [ 'class' => 'fa-li' ]) ?>two</li> <li><?= Icon::solid('square-check', [ 'class' => 'fa-beat fa-li' ]) ?>three</li> </ul>
rotations, flips
Code<?php use sjaakp\icon\Icon; ?> <p> <?= Icon::solid('mug-hot') ?> <?= Icon::solid('mug-hot', [ 'class' => 'fa-rotate-90' ]) ?> <?= Icon::solid('mug-hot', [ 'class' => 'fa-rotate-180' ]) ?> <?= Icon::solid('mug-hot', [ 'class' => 'fa-rotate-270' ]) ?> <?= Icon::solid('mug-hot', [ 'class' => 'fa-rotate-by', 'style' => '--fa-rotate-angle: 45deg;' ]) ?> <?= Icon::solid('mug-hot', [ 'class' => 'fa-flip-horizontal' ]) ?> <?= Icon::solid('mug-hot', [ 'class' => 'fa-flip-vertical' ]) ?> <?= Icon::solid('mug-hot', [ 'class' => 'fa-flip-both' ]) ?> rotations, flips </p>
beat, fade, beat-fade, bounce, flip, shake
Code<?php use sjaakp\icon\Icon; ?> <p> <?= Icon::solid('mug-hot', [ 'class' => 'fa-beat' ]) ?> <?= Icon::solid('mug-hot', [ 'class' => 'fa-fade' ]) ?> <?= Icon::solid('mug-hot', [ 'class' => 'fa-beat-fade' ]) ?> <?= Icon::solid('mug-hot', [ 'class' => 'fa-bounce' ]) ?> <?= Icon::solid('mug-hot', [ 'class' => 'fa-flip' ]) ?> <?= Icon::solid('mug-hot', [ 'class' => 'fa-shake' ]) ?> beat, fade, beat-fade, bounce, flip, shake </p>
spins
Code<?php use sjaakp\icon\Icon; ?> <p> <?= Icon::solid('rotate', [ 'class' => 'fa-spin' ]) ?> <?= Icon::solid('rotate', [ 'class' => 'fa-spin fa-spin-reverse' ]) ?> <?= Icon::solid('rotate', [ 'class' => 'fa-spin-pulse' ]) ?> spins </p>
border
Code<?php use sjaakp\icon\Icon; ?> <p><?= Icon::solid('mug-hot', [ 'class' => 'fa-border' ]) ?> border</p>
stack
Code<?php use sjaakp\icon\Icon; ?> <p><span class="fa-stack"> <?= Icon::solid('camera', [ 'class' => 'fa-stack-1x' ]) ?> <?= Icon::solid('ban', [ 'class' => 'fa-stack-2x tomato' ]) ?> </span> stack </p>
NEW! 99 text, counter
Code<?php use sjaakp\icon\Icon; ?> <p><span class="fa-layers fa-fw fa-2x"> <?= Icon::solid('bookmark', [ 'class' => 'red' ]) ?> <span class="fa-layers-text new-text">NEW!</span> </span> <span class="fa-layers fa-fw fa-2x"> <?= Icon::solid('envelope') ?> <span class="fa-layers-counter">99</span> </span> text, counter </p>
duotone colored (pro only)
Code<?php use sjaakp\icon\Icon; ?> <p> <?= Icon::duotone('strawberry', [ 'class' => 'fa-2x' ]) ?> <?= Icon::duotone('strawberry', [ 'class' => 'colored fa-2x' ]) ?> duotone colored (pro only) </p>
duotone swap opacity (pro only)
Code<?php use sjaakp\icon\Icon; ?> <p> <?= Icon::duotone('camera') ?> <?= Icon::duotone('camera', [ 'class' => 'fa-swap-opacity' ]) ?> duotone swap opacity (pro only) </p>