Font-Awesome значки не загружены из-за кусочка кода CSS

Question

Я пытаюсь интегрировать шрифт-awesome в веб-проект, но идентифицированный маленький фрагмент кода в моем css делает шрифты-удивительные значки отображаются как белые квадраты. Когда я удаляю маленький код CSS, он работает, но я не могу удалить его из-за существующего макета веб-сайта. Есть ли способ, чтобы значки отображались в любом случае?

Это код, который блокирует значки, которые необходимы для макета:

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

Это не имеет значения, если шрифт удивительного CSS включен до или после того, как моя пользовательского CSS коды. Вопрос остается ...

Answer 1

Ваше семейство шрифтов переписывается в Arial. Удалите связанные с шрифтом детали из этого селектора и добавьте его в селектор body.

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

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

Answer 2

Проблема в *: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 3

Вы перекрывая все (*) из шрифты в :before и :after псевдоселектора; которые используются шрифтом-awesome и многими другими libs. Вы должны попытаться настроить только , что необходимо изменить этим фрагментом кода с помощью .class или #id.