带有字形图标的引导选项卡

Question

想知道是否有人可以提供帮助...

<ul class="nav nav-pills nav-justified active">
        <li role="presentation" class=""><a href="#tab1" role="tab" data-toggle="tab" aria-expanded="false">Tab 1 <span class="glyphicon glyphicon-chevron-right"></span></a></li>
        <li role="presentation"><a href="#tab2" role="tab" data-toggle="tab">Tab 2 <span class="glyphicon glyphicon-chevron-right"></span></a></li>
        <li role="presentation" class="active current"><a href="#tab3" role="tab" data-toggle="tab" aria-expanded="true">Tab 3  <span class="glyphicon glyphicon-chevron-right"></span></a></li>
</ul>

我在这里使用 Bootstrap 对几个选项卡进行了简单的编码。

在活动状态下，我正在寻找可旋转 90 度的字形图标以实现良好的过渡。我已经看到了很多变化，但正在寻找导航药丸的最佳方式。

谢谢。

Answer 1

http://www.w3schools.com/cssref/css3_pr_transform.asp

这样的事情可以解决问题吗？我假设您只需要旋转跨度。每当 li 具有“活动”类时，这应该为您执行此操作

li.active span{transform: rotate(90deg);}