Geek asks and answers

Matching icon-home color on twitter bootstrap

I am trying to match the color of a house icon using twitter bootstrap with the color of inactive text:

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <ul class="nav">
        <li class="nav_item"><a href="indexdefaults.html"><i class="icon-home icon-gray"></i>Home</a></li>
        <li class="active"><a href="about.html">About</a></li>
      </ul>
    </div>
  </div>
</div>

but the icon-gray class is much darker than the text in the nav_item class. What is the corresponding icon for the foobar class that matches the color of the text nav_item?

+5
source share
3 answers

For icons, white and dark, there are only two options: if you want to get a different color set of icons, you must change the original icons in Photoshop or pay for the full set of icons and change the source files. No .icon-gray.

+3
source

You can get the gray color using custom style:

.icon-gray {
  opacity: 0.3;
}

, .

+10

Why don’t you just integrate: Font Awesome, which works fine with Bootstrap without image editing, and you can change the color of the icon in the same way as for text:

.icon-gray {color:#696969;}

Awesome Font: http://fortawesome.imtqy.com/Font-Awesome/

Find CSS Matching Color: http://www.w3schools.com/cssref/css_colornames.asp

0
source

More articles:


All Articles