在項目中使用fontawsome時無法更改字體系列

Question

我有一個菜單，我想在菜單中插入fontawsome圖標。我有以下代碼

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

我想要的菜單項顯示爲塊，使得用戶可以在圖標，點擊打開鏈接，爲了實現這一目標我必須在<a>標記內插入圖標。但是這樣做後，我無法更改字體家族。我可以改變尺寸和顏色，但不能改變家庭。我嘗試了很多解決方案，但沒有發生任何事情 無論如何改變font-family？

JS Fiddle

Answer 1

你不需要換任何文字時，將字體真棒HTML元素，所以你應該擁有的是：

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

Answer 2

那是因爲你的商標，你被包圍span和fa fa-home類中的首頁文本，所以font-awesome的css優先於div a字體選擇。

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