2016-07-22 13 views
2

Yii2 Bootstrap Nav Barメニュー項目に画像を追加することはできますか? official doc私は何か選択肢を見つけられませんでした。Yii2 Nav Barメニュー項目に画像を追加

ラベルテキストの代わりに画像を表示したい!

Navバーコードです。

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

       ], 
     ]; 

答えて

1

ラベル内の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; 

を使用すると、設定しなければならない場合は、アイコンあなたは、アイコン

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

を使用できるかどうか'encodeLabels' => false、

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

「ラベル」=>「サンプル」、私は私のためにFOこの作品は..私は缶ナビゲーションバーウィジェット –

+0

これを結んだが、それは 'サンプルであるとして、それはHTMLを示し'あなたはあなたのnavバーコードを投稿してください!いくつかの追加オプションを設定している可能性があります。 – scaisEdge

+0

を使用する奇妙な –

2

'brandLabel' の設定にイメージタグを追加します。

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

は、ナビゲーションのための属性::ウィジェットとして、 'encodeLabels' => falseを追加します。そうでなければ、コードを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. 
関連する問題