爲什麼我不能在我的div標籤中使用Font Awesome圖標？

我一直在嘗試使用我製作的卡內的Font Awesome圖標。不幸的是，他們根本沒有出現在我的卡的div內的任何地方。我認爲這與.card類:before選擇器有關，因爲它在沒有它的情況下工作。爲什麼我不能在我的div標籤中使用Font Awesome圖標？

任何想法如何在不改變設計的情況下在卡中放置圖標？

.card :before { 
-webkit-transform: translateX(-50%); 
    transform: translateX(-50%); 
    background-color: #eee; 
    box-shadow: 0 3px 2px rgba(52, 152, 219, 0.16); 
    border-radius: 30px; 
    font-size: 22px; 
    font-style: normal; 
    left: 50%; 
    line-height: 60px; 
    position: absolute; 
    top: -30px; 
    width: 60px; 
    color: #3498db; 
    content: "AA"; 
    font-family: 'Roboto', sans-serif; 
}

這裏有一個Codepen

來源

2016-08-04 Déric Dallaire

正如賽義德Rafeeq說。您可以使用用戶圖標而不是fa-user類，它是的code

例子：Codepen

來源

2016-08-04 13:28:38 Orlando

之前謝謝，這解決了我的問題。任何解釋爲什麼衝突發生？ –

我無法向自己解釋這一點 – Orlando

-1

請做小的改動前後級之間移除空間。和font-family和content屬性。

.card:before { 
    -webkit-transform: translateX(-50%); 
    transform: translateX(-50%); 
    background-color: #eee; 
    box-shadow: 0 3px 2px rgba(52, 152, 219, 0.16); 
    border-radius: 30px; 
    font-size: 22px; 
    font-style: normal; 
    left: 50%; 
    line-height: 60px; 
    position: absolute; 
    top: -30px; 
    width: 60px; 
    color: #3498db; 
    content:"\f033" 
    font-family: 'FontAwesome; 
}

來源

2016-08-04 13:14:29

這一點，在任何方式或形式，解決了他的問題... –

您需要使用圖標Unicode。
檢查這個link和CSS代碼：

.card:before { 
    content: '\f105'; 
    font-family: 'FontAwesome'; 
    font-size: 14px; 
}

來源

2016-08-04 13:19:24

您好，感謝您的回答。不幸的是，我並不想在頂部的圓圈中添加一個圖標。我想在整個div本身中使用圖標。例如，在codepen中，您看到標籤_There在這個label_之前應該有一個圖標，一個圖標應該出現在 –

爲什麼我不能在我的div標籤中使用Font Awesome圖標？

回答

相關問題