在引导选项卡的活动状态上添加图标字体 [英] Adding icon font on active state of bootstrap tabs

问题描述

好的，所以我正在尝试在活动的引导程序选项卡下方添加图标字体(离子图标，只是一个向上的箭头)，应该非常简单，但我无法弄清楚！

Ok so I am trying to add an icon font (ionicons, just an arrow pointing up) below an active bootstrap tab, should be pretty simple but I cant figure it out!

我有这个用于我的活动状态:

I have this for my active state:

.services .nav > li.active > a .services-icon-holder {
background-color: #272727;
cursor: pointer;
}

.services .nav > li.active > a .services-icon {
color: #fff;
cursor: pointer;
}

这是我想要达到的效果:

Here is the effect I am trying to achieve:

您可以查看我这里有什么(转到服务部分)

You can check out what I have here (go to services section)

推荐答案

您也可以像这样定义字体图标.我假设您使用 FontAwesome 作为图标.您可以在此处找到所有图标列表.

you can also define the font icon as well like this. I am assuming you are using FontAwesome for icons. you can find all icons list here.

li.active:after { 
    /*content: "∧"; */
    content: "\f106";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
}

这篇关于在引导选项卡的活动状态上添加图标字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！