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

bootstrap badge color

Question

Estoy agregando ícono 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 los elementos del menú. Se trata de "auto". Lo que quiero es que me gustaría agregar mi ícono personalizado. ¿Cómo puedo hacer esto?

Answer 1

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

crea 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 marcado,

<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, la background-image debe configurarse para cada icono, según corresponda.

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

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

Answer 2

Puede crear su propio icono definiéndolo 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 está dirigido por un selector de atributos establecido por el programa de arranque para aplicar todos los estilos (ancho / altura / altura de línea, etc.).

Intente 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 afectará la line-height de line-height de sus elementos. Aquí hay una demostración con un caso como este: http://jsfiddle.net/RwFeu/