在 Yii2 SideNavbar 中使用 Font Awesome
Font Awesome use inside the Yii2 SideNavbar
我已经按照 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 来检查元素,这给了我以下结果。希望这会是问题所在。
您正在使用 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',
]
]
]);
一次只能使用一种图标。
我已经按照 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 来检查元素,这给了我以下结果。希望这会是问题所在。
您正在使用 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',
]
]
]);
一次只能使用一种图标。