Yii2 导航栏在菜单项中添加图像

Muh*_*zad 5 yii2 yii2-advanced-app

是否可以在 Yii2 Bootstrap Nav Bar 菜单项中添加图像?在 官方文档中,我没有找到任何选项。

我想显示图像而不是标签文本!

导航条码是。

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

              ],
      ];
Run Code Online (Sandbox Code Playgroud)

sca*_*dge 5

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

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

如果 img 和标签中的 html 代码

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

我用

use yii\bootstrap\Nav;
use yii\bootstrap\NavBar;
Run Code Online (Sandbox Code Playgroud)

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

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


Pra*_*lam 5

添加 '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.
Run Code Online (Sandbox Code Playgroud)