2012-08-09 14 views
71

¿Hay alguna forma de incrustar HTML en el elemento css content: al utilizar un pseudo-elemento :before?Utilice FontAwesome o Glyphicons con css: antes de

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

Desde ': before' es un elemento seudo, no se puede tener' contenido html', solamente 'Text'. –

+0

Hola tig, solo comprobando si mi respuesta fue suficiente. Espero que haya ayudado. ¡Gracias! – keithwyland

+0

Realmente deberías aceptar la respuesta de wylander. Hace totalmente lo que necesito, ¡que parece ser lo que tú también querías! –

Respuesta

143

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';} 
+1

Observación impresionante !!! – chris

+12

Aquí puedes encontrar todos los códigos de ícono de contenido '" \ xxxx ";': http://astronautweb.co/snippet/font-awesome/ –

+1

@miromarchi ¡Esa es una buena lista, todo en un solo lugar! ¡Gracias por compartir! Además, si va al impresionante sitio web fuente que enumera los iconos (http://fortawesome.github.io/Font-Awesome/icons/) y hace clic en uno de los iconos, la página tiene el Unicode hacia la parte superior, que es el mismo número utilizado en la propiedad de contenido. – keithwyland

0

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.

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

+0

¿desde cuándo? bootstrap viene con glyphicons, no con fontawesome. – Dementic

+2

Esto es incorrecto y no se usa: antes. – Alex

-1

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

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"; 
} 
+0

Solo un breve recordatorio de que font awesome también proporciona variables para usar como contenido, de modo que también se puede usar: .pseudo-class: before { @include fa-icon(); contenido: $ fa-var-phone-square; } – Jan

0

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.

1

@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"); 
Cuestiones relacionadas