Usa FontAwesome o Glyphicons con css: prima

Question

C'è un modo per incorporare l'HTML nell'elemento cs content: quando si utilizza uno pseudoelemento :before?

voglio usare un font Awesome (o Glyphicon) in un caso d'uso come questo:

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

Dove X è qualcosa di simile <i class="icon-cut"></i>.

Posso, naturalmente, farlo manualmente in HTML, ma in questo caso voglio davvero usare :before.

Analogamente, esiste un modo per utilizzare <i> come elenco? Funziona, ma non si comporta in modo corretto per gli articoli bullet a più righe:

<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

Quello che stai descrivendo è in realtà ciò che FontAwesome sta già facendo. Applicano la famiglia di font FontAwesome allo pseudo elemento ::before di qualsiasi elemento che abbia una classe che inizi con "icon-".

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

poi usano l'elemento pseudo ::before per posizionare l'icona nella elemento con la classe. Ho appena andato a http://fortawesome.github.com/Font-Awesome/ e ispezionato il codice per trovare questo:

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

Quindi, se siete alla ricerca di aggiungere nuovamente l'icona, è possibile utilizzare l'elemento ::after per raggiungere questo obiettivo. O per la seconda parte della tua domanda, potresti usare lo pseudo elemento ::after per inserire il carattere di un punto elenco in modo che assomigli a un elemento di elenco. Quindi usa il posizionamento assoluto per posizionarlo a sinistra o qualcosa di simile.

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

Answer 2

Nel caso delle voci dell'elenco c'è un piccolo CSS che è possibile utilizzare per ottenere l'effetto desiderato.

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

Ho testato questo in Safari su 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> 

Tutti i caratteri impressionante icone disponibile di default con Bootstrap.

Answer 4

Questo è il modo più semplice per fare ciò che si sta cercando di fare:

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 l'icona in :before - recente Font impressionante costruisce includere il .fa-icon() mixin per SASS e meno . Ciò includerà automaticamente lo font-family e alcuni ritocchi di rendering (ad esempio -webkit-font-smoothing). Così puoi, ad es .:

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

Answer 6

Questo approccio dovrebbe essere evitato. Il valore predefinito per vertical-align è baseline. Cambiando la famiglia di font solo dello pseudo elemento si otterranno elementi con caratteri diversi. Diversi tipi di carattere possono avere diverse metriche di caratteri e diverse linee di base. Per allineare le diverse linee di base, l'altezza complessiva dell'elemento dovrebbe aumentare. See this effect in action.

È sempre meglio avere un elemento per icona di carattere.

Answer 7

@keithwyland La risposta è ottima. Ecco un mixin SCSS:

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

Usage:

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