2013-06-09 23 views
7

Sto usando font-awesome in un pulsante, tuttavia voglio anche avere un testo all'interno del fantastico pulsante font. la famiglia Font deve essere favolosa ma mi dà una sorta di font serif che non posso modificare.Come cambiare il font del testo fantastico?

enter image description here

codice che sto usando

<div class=" btn-toolbar"> 
<div class="btn-group" title="vote"> 
<button class="btn icon-"> 
<span class="icon-thumbs-up"> vote <span class="icon-thumbs-down"> 
</button> 
<button class="btn icon-heart" title="subscribe to get latest updates"></button> 

</div> 
    <div class="btn-group"> 
    <button class="btn icon-edit" title="edit"></button> 
    <button class="btn icon-print" title="print"></button> 

</div> 
    <div class="btn-group"> 
    <button class="btn icon-facebook" title="share on facebook"></button> 
    <button class="btn icon-twitter" title="share on twitter"></button> 
    <button class="btn icon-google-plus" title="share on google+"></button> 


</div> 
</div> 

risposta

9

Si consiglia di non utilizzare le icone direttamente sul pulsante, ma invece li aggiungere alla sua soddisfare. Inoltre hai errori di sintassi molto gravi. <span> non è un elemento a chiusura automatica, è necessario eseguire </span> ogni volta che lo si utilizza. La documentazione suggerisce invece di utilizzare <i></i>, ma viola i sentimenti di alcuni sviluppatori. Ad ogni modo, usiamolo in questo esempio (anche le campate).

Quando avete bisogno di un pulsante con l'icona, che fai:

<button class="btn" title="share on facebook"><i class="icon-facebook"></i></button> 

Quando avete bisogno di un testo accanto all'icona, semplicemente aggiungerla (notare lo spazio dopo icona).

<button class="btn"><i class="icon-thumbs-up"></i> Like</button> 

È possibile utilizzare anche più icone.

<button class="btn"><i class="icon-thumbs-up"></i> Vote <i class="icon-thumbs-down"></i></button> 

Per ulteriori esperimenti, guardare a questo violino: http://jsfiddle.net/Frizi/h69je/2/

+0

Questa può essere la migliore pratica, ma la questione porta a codice più pulito in modo che merita una risposta adeguata. – irth

1

fisso - utilizzato il seguente codice per sovrascrivere

<span class="icon-thumbs-up"> <span style="font-family:Helvetica Neue, Helvetica, Arial, sans-serif; font-size:12px;" >vote</span> <span class="icon-thumbs-down"> 
Problemi correlati