Matching Farbe von "icon-home" in Twitter Bootstrap

Question

Ich versuche, die Farbe des Home-Symbol entsprechen, um die Farbe des inaktiven Text wie folgt:

<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> 

aber das „Symbol -gray "-Klasse ist viel dunkler als der Text in der" nav_item "-Klasse. Was ist das entsprechende Klassensymbol-Foobar, das mit der Farbe des nav_item-Textes übereinstimmt?

Answer 1

Es gibt nur zwei Varianten der Symbole, weiß und dunkel, wenn Sie eine andere farbige Reihe von Symbolen erhalten möchten, müssen Sie die ursprünglichen Symbole in Photoshop ändern oder für die vollständige Icon-Set bezahlen und die Quelldateien ändern. Es gibt keine .icon-gray.

Answer 2

Sie können die graue Farbe erhalten, indem einen benutzerdefinierten Stil mit:

.icon-gray { 
    opacity: 0.3; 
} 

Möglicherweise müssen Sie die Opazität niedriger ändern oder höher als pro Gewicht von Schwarz.

Answer 3

Warum Sie nicht einfach integrieren: Schrift Ehrfürchtig, die mit Bootstrap funktioniert gut ohne Bildbearbeitung und Sie können die Farbe des Symbols ändern wie Sie Text zu tun:

.icon-gray {color:#696969;} 

Font Ehrfürchtig: http://fortawesome.github.io/Font-Awesome/

Suche CSS Spiel Farbe: http://www.w3schools.com/cssref/css_colornames.asp