由於一段CSS代碼，無法加載Font-Awesome圖標

Question

我試圖將font-awesome集成到一個Web項目中，但是在我的CSS中識別出的一小段代碼會使字體-awesome圖標顯示為白色正方形。 當我刪除一些CSS代碼時，它可以工作，但是由於當前的網站布局，我無法刪除它。 是否有辦法使圖標正確顯示？

這是阻止布局所需的圖標的代碼：

*,*:before,*:after{
    box-sizing: border-box;
    position: relative;
    font-family : Arial;
    font-size   : 12px;
    font-weight : normal;
}

無論是在我的自定義CSS代碼之前還是之后，都添加了font-awesome CSS。 問題仍然存在...

Answer 1

問題出在*:before因此您必須在CSS中進行更改。 看看這個https://jsfiddle.net/ss95sfLz/

的CSS

*,*:after{
  box-sizing: border-box;
  position: relative;
  font-family : Arial;
  font-size   : 12px;
  font-weight : normal;
}

這是有問題的，因為真棒字體圖標使用:before ，這是代碼

.fa-balance-scale::before {
   content: "";
}

Answer 2

您將覆蓋:before和:after偽選擇器中的所有（*） 字體 ； 真棒字體和許多其他lib都使用了它們。 您應該嘗試僅定位需要使用.class或#id代碼段進行的#id 。

Answer 3

您的字體系列已被覆蓋為Arial。 從此選擇器中刪除與字體相關的部分，並將其添加到body選擇器中。

*,*:before,*:after{
    box-sizing: border-box;
    position: relative;
}

body {
    font-family : Arial;
    font-size   : 12px;
    font-weight : normal;
}