在 Yii2 SideNavbar 中使用 Font Awesome

Question

我已经按照 GitHub Yii2 fontawesome 给出的指南进行操作，并通过 composer 成功安装。我的问题是他们提供的用于获取我的 SideNavbar 特定图标的代码对我不起作用。

我在 SideNav 菜单中使用了 FA::icon('home') 但此代码仅输出 "> 这个。不是主页图标。

我在 sidenav 菜单中使用的代码。

<?= SideNav::widget([
'type' => SideNav::TYPE_DEFAULT,
'heading' => 'System Functions',
'items' => [
    [
        'url' => '../dashboard/manager',
        'label' => Yii::t('app','Dashboard'),
        'icon' => 'home',   
        'active' => ($currentpage == 'Manager')
    ],
    [
        'url' => '#',
        'label' => 'Purchase',
        'icon' => FA::icon('home'),                       
         'items' => [
                [
                  'url' => '../dashboard/suppliers',
                  'label' => Yii::t('app','Suppliers'), 
                  'icon'=>'transport',                                
                  'active' => ($currentpage == 'Suppliers')
                ],
                [
                    'url' => '../dashboard/leaf-entry',
                    'label' => 'Leaf Collection', 
                    'icon'=>'leaf', 
                    'active' => ($currentpage == 'Leaf')
                ],
                [
                    'url' => '../dashboard/payments',
                    'label' => 'Payments', 
                    'icon'=>'phone', 
                    'active'=> ($currentpage == 'Payments') 
                ],
                ['label' => 'Reports', 'icon'=>'phone', 'url'=>'#']
         ],
    ],
    [
        'label' => 'Stock',
        'icon' => 'question-sign',
        'items' => [
            ['label' => 'Live Stock', 'icon'=>'info-sign', 'url'=>'#'],
            ['label' => 'Auction Despatch', 'icon'=>'phone', 'url'=>'#'],
            ['label' => 'Production Tracker', 'icon'=>'phone', 'url'=>'#'],
            ['label' => 'Reports', 'icon'=>'phone', 'url'=>'#']
          ],
    ],
    [
        'label' => 'Human Resource',
        'icon' => 'question-sign',
        'items' => [
            ['label' => 'Employees', 'icon'=>'info-sign', 'url'=>'#'],
            ['label' => 'Time Tracker', 'icon'=>'phone', 'url'=>'#'],
            ['label' => 'Payments', 'icon'=>'phone', 'url'=>'#'],
            ['label' => 'Reports', 'icon'=>'phone', 'url'=>'#']
          ],
    ],
    [
        'label' => 'End of day calculations',
        'icon' => 'question-sign',
        'items' => [
            ['label' => 'Water Basis', 'icon'=>'info-sign', 'url'=>'#'],
            ['label' => 'Dry Basis', 'icon'=>'phone', 'url'=>'#'],
            ['label' => 'Out Turn', 'icon'=>'phone', 'url'=>'#'],
            ['label' => 'Refuced Tea', 'icon'=>'phone', 'url'=>'#']
          ],
    ],
        ],
    ]);
?>

输出

而且我还使用了 Chrome DevTools 来检查元素，这给了我以下结果。希望这会是问题所在。

Answer 1

您正在使用 SideNav::widget，它使用默认图标前缀 "glyphicon glyphicon-"。这是 SideNav 属性。如果您使用 glyphicon 图标创建 SideNav，则它将仅使用 glyphicon 图标。如果你想使用 Font Awesome 图标，你需要像这样更改图标前缀：

      echo SideNav::widget([
        'type' => SideNav::TYPE_DEFAULT,
        'heading' => 'System Functions',
        'iconPrefix' => ' ',
        'items' => [
        [
            'url' => '#',
            'label' => 'Home',
            'icon' => 'fa fa-home',
        ]
    ]
]);

一次只能使用一种图标。

在 Yii2 SideNavbar 中使用 Font Awesome

Font Awesome use inside the Yii2 SideNavbar

yii2

navbar

font-awesome