rmrevin / yii2-fontawesome

Asset Bundle for Yii2 with Font Awesome http://fortawesome.github.io/Font-Awesome/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

No way to change order of icons in FA::stack()

p2made opened this issue · comments

In trying to re-create the cameras banned example at Font Awesome Examples I've found that yii2-fontawesome doesn't offer a way to change the order of the items in an icon stack.

This image shows my results...
camers banned

The code from the examples page is...

    <span class="fa-stack fa-lg">
        <i class="fa fa-camera fa-stack-1x"></i>
        <i class="fa fa-ban fa-stack-2x text-danger"></i>
    </span>

& gives the first icon in the image.

If I assemble my own stack with...

    <span class="fa-stack fa-lg">
        <?= FA::i('camera')->addCssClass('fa-stack-1x') ?>
        <?= FA::i('ban')->addCssClass('fa-stack-2x')->addCssClass('text-danger') ?>
    </span>

I get the 2nd icon in the image.

Using...

    <?php
        $camera = 'camera';
        $ban = FA::i('ban')->addCssClass('text-danger');
        $options = ['class' => 'fa-lg'];
        echo FA::stack($options)->on($ban)->icon($camera);
    ?>

or...

    <?php
        $camera = 'camera';
        $ban = FA::i('ban')->addCssClass('text-danger');
        $options = ['class' => 'fa-lg'];
        echo FA::stack($options)->icon($camera)->on($ban);
    ?>

gives HTML...

    <span class="fa-lg fa-stack">
        <i class="fa fa-ban text-danger fa-stack-2x"></i>
        <i class="fa fa-camera fa-stack-1x"></i>
    </span>

& the 3rd icon in the image.

The difference is only the order of the 2 icons. In the Font Awesome example, 'camera' with class 'fa-stack-1x' is the first icon, & 'ban' with class 'fa-stack-2x' is the 2nd (top, & also larger) icon.

I apologize for the long wait.
Your problem is solved in version 2.15.1

$camera = 'camera';
$ban = FA::i('ban')->addCssClass('text-danger');
$options = ['class' => 'fa-lg', 'template' => '{front}{back}'];
echo FA::stack($options)->icon($camera)->on($ban);

Beaut & thanks. I'll now go update my own work :)