Kann Schriftart-Familie nicht ändern, während fontaswsome in Projekt

Question

Ich habe ein Menü, ich möchte fontawesome Symbole in das Menü einfügen. Ich habe folgenden Code

HTML

<div> 
    <a href="#" ><span class="fa fa-home">Home</span></a> 
</div> 

CSS

div a { 
    font-size:50px; 
    display:block; 
    color:white; 
    font-weight:bold; 
    text-decoration:none; 
    background-color:green; 
    font-family:'Segoe UI'; 
} 

Ich möchte Menüpunkte als Block angezeigt werden, so dass Benutzer auf die Symbole klicken, können Link zu öffnen, zu erreichen, dass Ich muss das Symbol innerhalb <a> Tag einfügen. Aber nachdem ich das getan habe, kann ich die Schriftfamilie nicht ändern. Ich kann Größe und Farbe ändern, aber kann Familie nicht ändern. Ich habe viele Lösungen ausprobiert, aber nichts ist passiert. Gibt es trotzdem Schriftfamilie?

JS Fiddle

Answer 1

Sie müssen keinen Text mit Ihrem font-awesome HTML-Element wickeln, was so sollten Sie haben, ist:

<div> 
    <a href="#" ><span class="fa fa-home"></span>Home</a> 
</div> 

Answer 2

Das ist, weil in Ihrer Marke auf, Sie umschließen der Home-Text innerhalb der span mit den fa fa-home Klassen, so dass die CSS der Schriftart-genial Vorrang vor Ihrer div a Schriftart Auswahl hat.

<div> 
    <span class="fa fa-home"></span><a href="#" >Home</a> 
</div> 


div { 
background-color:green; 
display:inline-block; 
color:#fff; 
font-size:50px; 
} 
div a { 
    font-size:50px; 
    display:inline-block; 
    font-weight:bold; 
    text-decoration:none; 
    font-family:'arial'; 
    color:#fff; 
}