tomsea
(tomsea)
April 24, 2015, 2:07am
1
Hello, how can we display a Glyphicon in a NavBar element? Reading Bootstrap documentation I tried the following:
echo Nav::widget([
'options' => ['class' => 'navbar-nav navbar-left'],
'items' => [
['label' => Html::tag('span', '', ['class'=>'glyphicon glyphicon-chevron-right']).' OPTION 1', 'url' => '#'],
]
]);
But the "label" property seems to encode HTML so the output is not rendered as HTML. Any idea is really appreciated.
Thank you.
rupsk1607
(Webin2015)
April 24, 2015, 8:21am
2
tomsea:
echo Nav::widget([
'options' => ['class' => 'navbar-nav navbar-left'],
'items' => [
['label' => Html::tag('span', '', ['class'=>'glyphicon glyphicon-chevron-right']).' OPTION 1', 'url' => '#'],
]
]);
u can use below for icon and text together.
['label' => 'OPTION 1', 'options'=> ['class'=>'glyphicon glyphicon-chevron-right'], 'url' => ['#']];
timmy78
(Timothee Planchais)
April 24, 2015, 1:20pm
3
Put "encodeLabels" option to false :
echo Nav::widget([
'encodeLabels' => false,
'options' => ['class' => 'navbar-nav navbar-left'],
'items' => [
['label' => Html::tag('span', '', ['class'=>'glyphicon glyphicon-chevron-right']).' OPTION 1', 'url' => '#'],
]
]);
tomsea
(tomsea)
April 24, 2015, 10:37pm
4
Hello guys,
@rups g: Your suggestion might work but Bootstrap documentation for Glyphicons recommends: Use only on empty elements and don’t mix it with other classes.
http://getbootstrap.com/components/#glyphicons-how-to-use
@Timmy78 : That is great. I’m sorry I missed it from the docs. I was looking for a property like that inside the “items” property, for a per-item encoding configuration (like GridView.columns.format). But this component seems to be “all or nothing”.
Thank you both for your replies!