После изменения всего семейства шрифтов значки шрифтов отображаются в виде квадратов

Question

После применения приведенных ниже кодов, шрифт потрясающие значки отображаются в виде квадратов. Если я применю его к тегу body. Он не перезаписывает все семейства шрифтов, поэтому мне пришлось применить его к *. Как я могу исправить эту ошибку?

<style>
  * {
    font-family: "Open Sans", sans-serif !important;
  }
</style>

Answer 1

Если вы используете Font Awesome 5, вы можете использовать это

.fab
{
    font-family: 'Font Awesome 5 Brands' !important;
}

.fas, .far, .fa
{
    font-family: 'Font Awesome 5 Free' !important;
}

Answer 2

Это потому, что шрифт awesome требует, чтобы FontAwesome font-family применялся к элементам значков, чтобы правильно создавать и отображать значки.

Ваши стили, вероятно, перезаписывают это поведение FontAwesome.

Один из способов исправить это - убедиться, что класс .fas шрифта awesome по-прежнему правильно применяет необходимый шрифт FontAwesome к элементам .fas. Вы можете сделать это, обновив свой CSS:

<style>
  * {
    font-family: "Open Sans", sans-serif;
  }

  .fas { 
    font-family:FontAwesome; 
  }
</style>

Или, если ваш браузер поддерживает селектор :not CSS3:

<style>
  *:not(.fas) {
    font-family: "Open Sans", sans-serif;
  }
</style>