Jak zmienić czcionkę czcionką?

Question

Używam font-awesome w przycisku, ale chcę również, aby tekst znajdował się w kroju czcionki. Rodzina czcionek musi być fontawesome, ale to daje mi rodzaj czcionki szeryfowej, której nie mogę zmodyfikować.

Kod używam

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

Answer 1

Nie należy używać ikony bezpośrednio na przycisku, ale zamiast dodawać je do jego zadowolony. Ponadto masz bardzo poważne błędy składniowe. <span> nie jest elementem samozamykającym się, musisz zrobić </span> za każdym razem, gdy go używasz. Dokumentacja sugeruje zamiast tego użycie <i></i>, ale narusza to uczucia niektórych programistów. W każdym razie, użyjmy go w tym przykładzie (działa również rozpiętość).

Kiedy trzeba przycisk z ikoną zrobić:

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

Kiedy trzeba tekst obok ikony, po prostu dołączyć go (zauważ przestrzeń po ikonie).

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

Można również użyć wielu ikon.

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

uzyskać więcej eksperymentów, spojrzeć na ten skrzypce: http://jsfiddle.net/Frizi/h69je/2/

Answer 2

Stała - używany następujący kod, aby zastąpić

<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">