更改活动选项卡上的glyphicons

Question

所以我在我的网站上使用引导程序，我想在选项卡旁边显示一个小的字形图标，但我希望字形图标在活动选项卡中更改。正如您在图片上看到的那样，现在所有选项卡都有相同的图标，但我希望活动选项卡上的图标更改为其他内容。这样做的最佳方式是什么？

谢谢

<ul class="nav nav-pills outline" id="prodtabs" role="tablist">
    <li role="presentation" class="tab-title active outline"><a href="#tabprodesc" aria-controls="home" role="tab" data-toggle="tab">product description<i class="fa fa-angle-down"></i></a></li>
    <li role="presentation" class="tab-title outline"><a href="#tabdetail" aria-controls="profile" role="tab" data-toggle="tab">detail specification <i class="fa fa-angle-down"></i></a></li>
    <li role="presentation" class="tab-title outline"><a href="#tabreviews" aria-controls="messages" role="tab" data-toggle="tab">reviews <i class="fa fa-angle-down"></i></a></li>

  </ul>

Answer 1

如果您需要HTML / CSS解决方案，那么您需要这样做：

<ul class="nav nav-pills outline" id="prodtabs" role="tablist">
    <li role="presentation" class="tab-title active outline"><a href="#tabprodesc" aria-controls="home" role="tab" data-toggle="tab">product description<i class="fa"></i></a></li>
    <li role="presentation" class="tab-title outline"><a href="#tabdetail" aria-controls="profile" role="tab" data-toggle="tab">detail specification <i class="fa"></i></a></li>
    <li role="presentation" class="tab-title outline"><a href="#tabreviews" aria-controls="messages" role="tab" data-toggle="tab">reviews <i class="fa"></i></a></li>

  </ul>

我删除了加载字形的类。 现在添加这个css：

ul.nav-pills li.tab-title i.fa:before {
    content: "\f107";
}
ul.nav-pills li.active i.fa:before {
    content: "\f005";
}

此解决方案确实需要对HTML进行一些更改。您必须删除加载字形的类，并根据tab元素是否处于活动状态来加载另一个字符。

Answer 2

如果您希望解决方案仅使用HTML / CSS或Bootstrap，那么我很抱歉，但这是不可能的。您需要使用JavaScript或类似的东西。

以下是一个jQuery代码示例，它会在页面加载后立即使用fa-angle-down更改项目的类。不是一个确切的解决方案，但我希望你可以从这里开始工作？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.fa-angle-down').addClass('fa-twitter');
$('.fa-angle-down').removeClass('fa-angle-down');
});
</script>