Utilice FontAwesome o Glyphicons con css: antes de

Question

¿Hay alguna forma de incrustar HTML en el elemento css content: al utilizar un pseudo-elemento :before?

Quiero utilizar una fuente impresionante (o Glyphicon) en un caso de uso como esto:

h1:before { 
     content: "X"; 
     padding-right: 10px; 
     padding-left: 10px; 
     color: @orangeLight; 
    } 

Dónde X es algo así como <i class="icon-cut"></i>.

Puedo, por supuesto, hacerlo manualmente en HTML, pero realmente quiero usar :before en este caso.

De forma similar, ¿hay alguna forma de usar <i> como una lista de viñetas? Esto funciona, pero no se comporta correctamente para elementos de viñeta multilínea:

<ul class="icons"> 
    <li><i class="icon-ok"></i> Lists</li> 
    <li><i class="icon-ok"></i> Buttons</li> 
    <li><i class="icon-ok"></i> Button groups</li> 
    <li><i class="icon-ok"></i> Navigation</li> 
    <li><i class="icon-ok"></i> Prepended form inputs</li> 
</ul> 

Answer 1

Lo que usted describe es en realidad lo que está haciendo ya FontAwesome. Aplican FontAwesome font-family al ::before pseudo elemento de cualquier elemento que tenga una clase que comience con "icon-".

[class^="icon-"]:before, 
[class*=" icon-"]:before { 
    font-family: FontAwesome; 
    font-weight: normal; 
    font-style: normal; 
    display: inline-block; 
    text-decoration: inherit; 
} 

luego usan el elemento seudo ::before colocar el icono en el elemento con la clase. Acabo de ir a http://fortawesome.github.com/Font-Awesome/ e inspeccionó el código para encontrar esto:

.icon-cut:before { 
    content: "\f0c4"; 
} 

Así que si usted está mirando para agregar el icono de nuevo, se puede utilizar el elemento ::after para lograrlo. O para la segunda parte de su pregunta, puede usar el pseudo elemento ::after para insertar el carácter de viñeta para que parezca un elemento de la lista. Luego usa posicionamiento absoluto para colocarlo a la izquierda, o algo similar.

i:after{ content: '\2022';} 

Answer 2

En el caso de los elementos de su lista, hay un pequeño CSS que puede usar para lograr el efecto deseado.

ul.icons li { 
    position: relative; 
    padding-left: -20px; // for example 
} 
ul.icons li i { 
    position: absolute; 
    left: 0; 
} 

He probado esto en Safari en OS X.

Answer 3

<ul class="icons-ul"> 
<li><i class="icon-play-sign"></i> <a>option</a></li> 
<li><i class="icon-play-sign"></i> <a>option</a></li> 
<li><i class="icon-play-sign"></i> <a>option</a></li> 
<li><i class="icon-play-sign"></i> <a>option</a></li> 
<li><i class="icon-play-sign"></i> <a>option</a></li> 
</ul> 

Todos los iconos impresionantes fuente viene por defecto con Bootstrap.

Answer 4

Ésta es la manera más fácil de hacer lo que está tratando de hacer:

http://jsfiddle.net/ZEDHT/

<style> 
ul { 
    list-style-type: none; 
} 
</style> 

<ul class="icons"> 
<li><i class="fa fa-bomb"></i> Lists</li> 
<li><i class="fa fa-bomb"></i> Buttons</li> 
<li><i class="fa fa-bomb"></i> Button groups</li> 
<li><i class="fa fa-bomb"></i> Navigation</li> 
<li><i class="fa fa-bomb"></i> Prepended form inputs</li> 
</ul> 

Answer 5

Re: usando el icono en :before - reciente fuente impresionante construye incluir el mixin .fa-icon() para SASS y menos . Esto incluirá automáticamente el font-family, así como algunos ajustes de representación (por ejemplo, -webkit-font-smoothing). Por lo tanto, puede hacerlo, por ejemplo:

// Add "?" icon to header. 
h1:before { 
    .fa-icon(); 
    content: "\f059"; 
} 

Answer 6

Este enfoque debe evitarse. El valor predeterminado para vertical-align es baseline. Cambiar la familia de fuentes de solo el pseudo elemento dará como resultado elementos con fuentes diferentes. Las diferentes fuentes pueden tener diferentes métricas de fuentes y diferentes líneas de base. Para alinear diferentes líneas de base, la altura total del elemento debería aumentar. See this effect in action.

Siempre es mejor tener un elemento por icono de fuente.

Answer 7

@keithwyland respuesta es genial. He aquí un mixin SCSS:

@mixin font-awesome($content){ 
    font-family: FontAwesome; 
    font-weight: normal; 
    font-style: normal; 
    display: inline-block; 
    text-decoration: inherit; 
    content: $content; 
} 

Uso:

@include font-awesome("\f054");