Добавление иконок в Yii2 Navbar - PullRequest
Новая
       27

Добавление иконок в Yii2 Navbar

0 голосов
/ 11 марта 2019

Я довольно новичок в 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();

Как вы можете видеть здесь, я добавляю значок замка и помещаю его рядом с опцией входа в систему.Есть ли способ для меня, чтобы вставить этот значок в ссылку, чтобы они одинаково реагировали на наведение?Я ищу что-то вроде: 

<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>

Любая помощь очень ценится!

1 Ответ

1 голос
/ 11 марта 2019

Что я понимаю, что вы хотите отобразить значок блокировки в навигации вдоль текста входа, как показано ниже

enter image description here

Если это правильно, вы не добавляете значок в правильном месте, вам нужно добавить html-значок внутри свойства label, а затем установить '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>&nbsp;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();
...