CODEWITHSUNDEEP
csstwitter-bootstrapicons
kovpack
kovpack

Reputation: 5045

How to change icon color in twitter bootstrap to dark?

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>

Upvotes: 1

Views: 9154

Answers (2)

Jiteen
Jiteen

Reputation: 427

There is indeed a method to change the color :

just go to the bootstrap.min.css

and search for .bs-glyphicons li:hover

and change the 'color: #fff' to 'color : #000' (or whatever color you want)

I tested it for one my projects and it is working perfectly. Hope this helps you as well.

Upvotes: 0

Chris
Chris

Reputation: 26878

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.

Upvotes: 3

Related Questions