如何优雅地在Yii2项目中使用FontAwesome图标？rmrevin/yii2-fontawesome帮你轻松搞定！

<code class="bash">composer require "rmrevin/yii2-fontawesome:~3.5"</code>

<code class="php">// frontend/assets/AppAsset.php
class AppAsset extends AssetBundle
{
    // ...
    public $depends = [
        // ...
        'rmrevin\yii\fontawesome\CdnFreeAssetBundle'
    ];
}</code>

<code class="php">\rmrevin\yii\fontawesome\CdnFreeAssetBundle::register($this);</code>

<code class="php">use rmrevin\yii\fontawesome\FAS; // 引入Font Awesome Solid风格图标类

// 最简单的用法：显示一个“主页”图标
echo FAS::icon('home'); 
// 输出：<i class="fas fa-home"></i>

// 带有额外HTML属性的图标
echo FAS::icon(
    'arrow-left', 
    ['class' => 'big-arrow', 'data-action' => 'go-back']
); 
// 输出：<i class="big-arrow fas fa-arrow-left" data-action="go-back"></i>

// 在按钮中嵌入图标
use yii\helpers\Html;
echo Html::submitButton(
    Yii::t('app', '{icon} Save', ['icon' => FAS::icon('check')])
); 
// 输出：<button type="submit"><i class="fas fa-check"></i> Save</button></code>

<code class="php">// 图标旋转：例如一个齿轮图标持续旋转
echo FAS::icon('cog')->spin();       // <i class="fas fa-cog fa-spin"></i>

// 固定宽度图标，在列表中非常有用
echo FAS::icon('cog')->fixedWidth(); // <i class="fas fa-cog fa-fw"></i>

// 调整图标大小（支持多种预设大小，如2x, 3x, 5x）
echo FAS::icon('cog')->size(FAS::SIZE_3X); 
// <i class="fas fa-cog fa-3x"></i>

// 图标翻转（水平或垂直）
echo FAS::icon('cog')->flip(FAS::FLIP_VERTICAL); 
// <i class="fas fa-cog fa-flip-vertical"></i>

// 组合多种样式：一个旋转、固定宽度、靠左浮动且3倍大小的齿轮图标
echo FAS::icon('cog')
        ->spin()
        ->fixedWidth()
        ->pullLeft()
        ->size(FAS::SIZE_LARGE);
// <i class="fas fa-cog fa-spin fa-fw pull-left fa-lg"></i></code>

<code class="php">// 图标堆叠：例如一个Twitter图标在一个方块背景上
echo FAS::stack()
        ->icon('twitter')
        ->on('square'); // 'on' 方法用于设置背景图标
/* 输出类似：
<span class="fa-stack">
  <i class="fas fa-square fa-stack-2x"></i>
  <i class="fas fa-twitter fa-stack-1x"></i>
</span>
*/

// 堆叠文本和图标：在图标上显示数字
echo FAS::stack()
     ->on(FAS::Icon('circle')) // 背景是圆形
     ->text('1'); // 前景是数字1
/* 输出类似：
<span class="fa-stack">
  <i class="fas fa-circle fa-stack-2x"></i>
  <span class="fa-stack-1x">1</span>
</span>
*/

// 无序列表图标：为列表项添加图标
echo FAS::ul(['data-role' => 'unordered-list'])
     ->item('Bullet item', ['icon' => 'circle'])
     ->item('Checked item', ['icon' => 'check']);
/* 输出类似：
<ul class="fa-ul" data-role="unordered-list">
  <li><i class="fas fa-circle fa-li"></i>Bullet item</li>
  <li><i class="fas fa-check fa-li"></i>Checked Item</li>
</ul>
*/</code>