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

<?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)

<?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

<?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

<?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

<?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

<?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

<?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

<?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

<?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

<?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

<?php
use sjaakp\icon\Icon;
?>
    
<p><?= Icon::solid('mug-hot', [ 'class' => 'fa-border' ]) ?> border</p>

stack

<?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

<?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)

<?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)

<?php
use sjaakp\icon\Icon;
?>
    
<p>
    <?= Icon::duotone('camera') ?>
    <?= Icon::duotone('camera', [ 'class' => 'fa-swap-opacity' ]) ?>
    duotone swap opacity (pro only)
</p>