Come aggiungere un'icona personalizzata in Twitter Bootstrap?

Question

Aggiungo icona con Twitter Bootstrap senza problemi. Hanno un sacco di alternative.

http://twitter.github.com/bootstrap/base-css.html#icons

Tuttavia, non ho potuto trovare icona appropriata per una delle voce di menu. Si tratta di "macchina". Quello che voglio è che vorrei aggiungere la mia icona personalizzata. Come posso fare questo?

Answer 1

È possibile creare il proprio icona definendolo in una classe come s:

.icon-car { 
    background-image: url("http://cdn5.iconfinder.com/data/icons/Symbolicons_Transportation/24/Car.png"); 
    background-position: center center; 
} 

Tenendo presente, naturalmente, di utilizzare il prefisso .icon-* in quanto è mirato da un selettore di attributo impostato dal bootstrap per applica tutti gli stili (widh/altezza/altezza riga ecc ...).

Basta provare a mantenere la stessa larghezza e altezza delle icone originali (14x14), in questo modo non sarà necessario definire la larghezza e l'altezza e non si scherza con gli elementi line-height. Ecco una demo con un caso del genere: http://jsfiddle.net/RwFeu/

Answer 2

Ecco cosa facciamo, in modo che tutte le icone si trovino in un singolo file sprite e sia possibile consentire icone di dimensioni arbitrarie.

creare un file CSS come

[class^="icon-custom-"], 
[class*=" icon-custom-"] { 
    background-image: url("https://app.10000ft.com/images/compSpritesButtonsIcons.png?8"); 
} 

.icon-custom-logo { background-position : -530px -700px; width : 142px; height : 158px; } 
.icon-custom-intheoffice { background-position: -395px -60px; width: 24px; height: 24px } 

E poi nel markup,

<i class="icon-search"></i> a standard bootstrap icon 
<i class="icon-custom-intheoffice"></i> a custom icon, using our own sprite file. 
<i class="icon-custom-logo"></i> a logo, an even bigger sprite icon 
<!-- spritefile from www.10000ft.com. not for reuse, please --> 

Si noti che questo assume un singolo file sprite che contiene tutte le icone. Se si dispone di più file di sprite, è necessario impostare background-image per ciascuna icona, di conseguenza.

JSFiddle a http://jsfiddle.net/shyamh/cvHdt/

Questa soluzione si basa sull'esempio pubblicato da Kevin