Question

我遵循GitHub Yii2 fontawesome提供的指南，并通过composer成功安装。我的问题是他们为我的SideNavbar获取特定图标的代码对我不起作用。

我在我的SideNav菜单中使用了 FA :: icon（'home'），但此代码只显示了“＆gt; 。而不是主页图标。< / p>

我在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中使用

1 个答案: