向 Yii2 导航栏添加图标
Adding Icons to Yii2 Navbar
我是 Yii2 的新手,我目前正在使用内置小部件构建一个基本的导航栏。我遇到的唯一问题是我不确定如何在相关菜单选项旁边添加图标。我当前的导航栏如下所示:
NavBar::begin([
'brandLabel' => Html::img('@web/images/logo.png', ['alt'=>Yii::$app->name,'style'=>'height: 50px; width: 171px; top: 15px; left: 50px; position: absolute;']),
'brandUrl' => Yii::$app->homeUrl,
'options' => [
'class' => 'navbar navbar-fixed-top',
],
]);
echo Nav::widget([
'options' => ['class' => 'navbar-nav','style'=>'padding-left:45%;padding-top:35px;'],
'items' => [
['label' => 'How It Works', 'url' => ['/site/index']],
['label' => 'Products', 'url' => ['/site/about']],
['label' => 'Pricing', 'url' => ['/site/about']],
['label' => 'Contact', 'url' => ['/site/contact']],
'<li class="line" style="padding-top:5px;padding-right:10px;">|</li>',
// '<i class="glyphicon glyphicon-inbox" style="right:70px;top:7px;"></i>',
'<i class="glyphicon glyphicon-lock" style="right:70px;top:7px;"></i>',
Yii::$app->user->isGuest ? (
['label' => 'Login','class'=>'login', 'url' => ['/site/login'],]
) : (
'<li>'
. Html::beginForm(['/site/logout'], 'post')
. Html::submitButton(
'Logout (' . Yii::$app->user->identity->username . ')',
['class' => 'btn btn-link logout']
)
. Html::endForm()
. '</li>'
)
],
]);
NavBar::end();
如您所见,我添加了锁定图标并将其放置在登录选项旁边。有没有办法让我在 link 中嵌入该图标,以便它们对悬停的反应相同?我正在寻找类似以下内容的内容:
<a href="/site/login"><i class="glyphicon glyphicon-lock"></i>Login</a>.
但我目前有:
<i class="glyphicon glyphicon-lock" style="right:70px;top:7px;"></i>
<a href="/site/login">Login</a>
非常感谢任何帮助!
据我所知,您想在导航中沿着登录文本显示一个锁定图标,如下所示
如果那是正确的,那么您没有在正确的位置添加图标,您应该在 label
属性 中添加图标 html,然后在 'encodeLabels' => false,
中设置 'encodeLabels' => false,
Nav
小部件。
您的代码应如下所示
NavBar::begin(
[
'brandLabel' => Html::img('@web/images/logo.png', ['alt' => Yii::$app->name, 'style' => 'height: 50px; width: 171px; top: 15px; left: 50px; position: absolute;']),
'brandUrl' => Yii::$app->homeUrl,
'options' => [
'class' => 'navbar navbar-fixed-top'
]
]
);
echo Nav::widget(
[
'encodeLabels' => false,
'options' => ['class' => 'navbar-nav', 'style' => 'padding-left:45%;padding-top:35px;'],
'items' => [
['label' => 'How It Works', 'url' => ['/site/index']],
['label' => 'Products', 'url' => ['/site/about']],
['label' => 'Pricing', 'url' => ['/site/about']],
['label' => 'Contact', 'url' => ['/site/contact']],
'<li class="line" style="padding-top:5px;padding-right:10px;">|</li>',
Yii::$app->user->isGuest ? (
['label' => '<i class="glyphicon glyphicon-lock"></i> Login', 'class' => 'login', 'url' => ['/site/login']]
) : (
'<li>'
. Html::beginForm(['/site/logout'], 'post')
. Html::submitButton(
'Logout (' . Yii::$app->user->identity->username . ')',
['class' => 'btn btn-link logout']
)
. Html::endForm()
. '</li>'
)
]
]
);
NavBar::end();
我是 Yii2 的新手,我目前正在使用内置小部件构建一个基本的导航栏。我遇到的唯一问题是我不确定如何在相关菜单选项旁边添加图标。我当前的导航栏如下所示:
NavBar::begin([
'brandLabel' => Html::img('@web/images/logo.png', ['alt'=>Yii::$app->name,'style'=>'height: 50px; width: 171px; top: 15px; left: 50px; position: absolute;']),
'brandUrl' => Yii::$app->homeUrl,
'options' => [
'class' => 'navbar navbar-fixed-top',
],
]);
echo Nav::widget([
'options' => ['class' => 'navbar-nav','style'=>'padding-left:45%;padding-top:35px;'],
'items' => [
['label' => 'How It Works', 'url' => ['/site/index']],
['label' => 'Products', 'url' => ['/site/about']],
['label' => 'Pricing', 'url' => ['/site/about']],
['label' => 'Contact', 'url' => ['/site/contact']],
'<li class="line" style="padding-top:5px;padding-right:10px;">|</li>',
// '<i class="glyphicon glyphicon-inbox" style="right:70px;top:7px;"></i>',
'<i class="glyphicon glyphicon-lock" style="right:70px;top:7px;"></i>',
Yii::$app->user->isGuest ? (
['label' => 'Login','class'=>'login', 'url' => ['/site/login'],]
) : (
'<li>'
. Html::beginForm(['/site/logout'], 'post')
. Html::submitButton(
'Logout (' . Yii::$app->user->identity->username . ')',
['class' => 'btn btn-link logout']
)
. Html::endForm()
. '</li>'
)
],
]);
NavBar::end();
如您所见,我添加了锁定图标并将其放置在登录选项旁边。有没有办法让我在 link 中嵌入该图标,以便它们对悬停的反应相同?我正在寻找类似以下内容的内容:
<a href="/site/login"><i class="glyphicon glyphicon-lock"></i>Login</a>.
但我目前有:
<i class="glyphicon glyphicon-lock" style="right:70px;top:7px;"></i>
<a href="/site/login">Login</a>
非常感谢任何帮助!
据我所知,您想在导航中沿着登录文本显示一个锁定图标,如下所示
如果那是正确的,那么您没有在正确的位置添加图标,您应该在 label
属性 中添加图标 html,然后在 'encodeLabels' => false,
中设置 'encodeLabels' => false,
Nav
小部件。
您的代码应如下所示
NavBar::begin(
[
'brandLabel' => Html::img('@web/images/logo.png', ['alt' => Yii::$app->name, 'style' => 'height: 50px; width: 171px; top: 15px; left: 50px; position: absolute;']),
'brandUrl' => Yii::$app->homeUrl,
'options' => [
'class' => 'navbar navbar-fixed-top'
]
]
);
echo Nav::widget(
[
'encodeLabels' => false,
'options' => ['class' => 'navbar-nav', 'style' => 'padding-left:45%;padding-top:35px;'],
'items' => [
['label' => 'How It Works', 'url' => ['/site/index']],
['label' => 'Products', 'url' => ['/site/about']],
['label' => 'Pricing', 'url' => ['/site/about']],
['label' => 'Contact', 'url' => ['/site/contact']],
'<li class="line" style="padding-top:5px;padding-right:10px;">|</li>',
Yii::$app->user->isGuest ? (
['label' => '<i class="glyphicon glyphicon-lock"></i> Login', 'class' => 'login', 'url' => ['/site/login']]
) : (
'<li>'
. Html::beginForm(['/site/logout'], 'post')
. Html::submitButton(
'Logout (' . Yii::$app->user->identity->username . ')',
['class' => 'btn btn-link logout']
)
. Html::endForm()
. '</li>'
)
]
]
);
NavBar::end();