Is it possible to add images in Yii2 Bootstrap Nav Bar menu items? In official doc I haven't found any option.
I want to show images instead of Label text!
Nav Bar code is.
<?php
NavBar::begin([
'brandLabel' => 'My Company',
'brandUrl' => Yii::$app->homeUrl,
'options' => [
'class' => 'navbar-inverse navbar-fixed-top',
],
]);
$menuItems = [];
$menuItems[] = [
'label' => Yii::t('app','Language'),
'items' => [
[
'label' => 'English',
'url' => ['site/language','set'=>'en'],
],
'<li class="divider"></li>',
[
'label' => 'Danmark',
'url' => ['site/language','set'=>'da'],
],
],
];
if an icon you can use icon
$menuItems[] = [
'label' => Yii::t('app','Language'),
'items' => [
[
'label' => 'English',
'url' => ['site/language','set'=>'en'],
'icon'=> 'cog',
],
if an img and the html code in label
$menuItems[] = [
'label' => Yii::t('app','Language'),
'items' => [
[
'label' => '<img src="smiley.gif" ><span>sample</span>',
'url' => ['site/language','set'=>'en'],
],
I use
use yii\bootstrap\Nav;
use yii\bootstrap\NavBar;
and you should set the 'encodeLabels' => false,
echo Nav::widget([
'options' => ['class' => 'navbar-nav navbar-right'],
'items' => $menuItems,
'encodeLabels' => false,
]);
Add 'encodeLabels' => false, as a attribute for Nav::widget. Or else it will not convert the code to HTML and it will consider it as string and it will display as it is given inside the label.
echo Nav::widget([
'options' => ['class' => 'navbar-nav navbar-left'],
'encodeLabels' => false,
'items' => [
[
'label' => '<span class="glyphicon glyphicon-home"></span>',
'url' => ['/site/dashboard'],
],
] // Close of items
]); // Close of Nav::Widget.
Add an image tag to the 'brandLabel' setting:
NavBar::begin([
'brandLabel' => '<img id="logo" src="/img/logo.svg" alt="logo">',
'brandUrl' => Yii::$app->homeUrl,
'options' => [
'class' => 'navbar',
],
]);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With