¿Cómo agregar un icono personalizado en Twitter Bootstrap?

Question

Estoy agregando un icono con Twitter Bootstrap sin problema. Tienen muchas alternativas.

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

Sin embargo, no pude encontrar el icono apropiado para uno de elemento de menú. Se trata de "auto". Lo que quiero es que me gustaría agregar mi icono personalizado. ¿Cómo puedo hacer esto?

Answer 1

Usted puede crear su propio icono definiéndola en su propia clase como s:

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

Teniendo en cuenta, por supuesto, utilizar el prefijo .icon-* ya que se targetted mediante un selector de atributos establecidos por el sistema de arranque a aplicar todos los estilos (ancho/altura/altura de línea, etc.).

Simplemente trate de mantener el mismo ancho y alto que los iconos originales (14x14), de esta manera no tendrá que definir su propio ancho y alto y no se meterá con el line-height de sus elementos. Aquí hay una demostración con un caso como este: http://jsfiddle.net/RwFeu/

Answer 2

Esto es lo que hacemos, de modo que todos los iconos estén en un solo archivo de sprite y usted puede permitir iconos de tamaño arbitrario.

crear un archivo CSS como

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

Y luego, en su margen de beneficio,

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

Tenga en cuenta que esto supone un único archivo de sprites que contiene todos los iconos. Si tiene varios archivos de sprite, el background-image se debe configurar para cada icono, según corresponda.

jsFiddle en http://jsfiddle.net/shyamh/cvHdt/

Esta solución se basa en el ejemplo publicado por Kevin