Yii2 Nav Bar 在菜单项中添加图像

Question

是否可以在 Yii2 中添加图像 Bootstrap 导航栏菜单项？在 official doc 中我没有找到任何选项。

我想显示图片而不是标签文本！

导航条码是。

<?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'],
                ],

              ],
      ];

Answer 1

如果一个图标你可以使用图标

   $menuItems[] = [
        'label' => Yii::t('app','Language'),
        'items' => [
            [
              'label' => 'English', 
              'url' => ['site/language','set'=>'en'],
              'icon'=> 'cog',
            ],

如果 img 和标签

中的 html 代码

  $menuItems[] = [
        'label' => Yii::t('app','Language'),
        'items' => [
            [
              'label' => '<img src="smiley.gif" ><span>sample</span>', 
              'url' => ['site/language','set'=>'en'],
            ],

我用

use yii\bootstrap\Nav;
use yii\bootstrap\NavBar;

你应该设置 'encodeLabels' => false,

        echo Nav::widget([
            'options' => ['class' => 'navbar-nav navbar-right'],
            'items' => $menuItems,
            'encodeLabels' => false,
        ]);

Answer 2

将图片标签添加到 'brandLabel' 设置：

NavBar::begin([
    'brandLabel' => '<img id="logo" src="/img/logo.svg" alt="logo">',
    'brandUrl' => Yii::$app->homeUrl,
    'options' => [
        'class' => 'navbar',
    ],
]);

Answer 3

添加 'encodeLabels' => false，作为 Nav::widget 的属性。否则它不会将代码转换为 HTML，它会将其视为字符串，并按照标签内给定的方式显示。

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.

Yii2 Nav Bar 在菜单项中添加图像

Yii2 Nav Bar add images in menu items

yii2

yii2-advanced-app