Question

The problem is that when my menu tab item is active (like the first one here) – the icon becomes white automatically and it not visible. How to change the color of icon to black? There is class to make it white icon-white, but there is no class to make it dark.

<ul class="nav nav-tabs">
<li class="active">
    <a href="#">
        <i class="icon-fire"></i> Newest</a>
</li>
<li>
    <a href="#">
        <i class="icon-star"></i> Most popular</a>
</li>
<li>
    <a href="#">
        <i class="icon-heart"></i> Etc.</a>
</li>
</ul>

Answer 1

You can try overriding the .active styling by adding this to your icons: background-image: url("../img/glyphicons-halflings.png") !important; (you might have to adjust the path, but probably not).

There are only two available colors; the default dark gray one, and the white one. You can’t change the color to other than those two, because they’re being grabbed from a static sprited png.

To have more control on the size of such icons and their color, take a look at Font Awesome, built to be integrated with Bootstrap. It gives you full control, since the icons are saved in vector format as a font.