Шрифт 5 классный псевдо-класс не работает с моим комплектом - PullRequest
Новая
       58

Шрифт 5 классный псевдо-класс не работает с моим комплектом

0 голосов
/ 11 января 2020

Примечание: я не добавил свой номер набора здесь

Я использую Font awesome 5. Я получил скрипт набора после входа в систему шрифтом awesome poral. Моя проблема в том, что если я добавил код ниже 

<!doctype html>
<html>
  <head>
    <!-- Place your kit's code here -->
    <script src="https://kit.fontawesome.com/kitnumber.js" crossorigin="anonymous"></script>
  </head>
  <body>
    <i class="fas fa-thumbs-up fa-5x"></i>
  </body>
</html>

, то я получаю свою иконку, но если я использую псевдокласс, я не получаю иконку. 

<!doctype html>
<html>
  <head>
    <!-- Place your kit's code here -->
    <script src="https://kit.fontawesome.com/kitnumber.js" crossorigin="anonymous"></script>
    <style type="text/css">
      .f_icon:after{
         content: "\f164";
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        display: inline-block;
        position: absolute;
        top: 30%;
      }
    </style>
  </head>
  <body>
    <div class="f_icon"></div>
  </body>
</html>

Но Код выше работает, если я добавляю шрифт awesome css без моего комплекта.

Ответы [ 2 ]

1 голос
/ 11 января 2020

Обновление (24/03/2020) : ошибка исправлена, начиная с версии 5.13

Вам необходимо исправить семейство шрифтов, чтобы учесть использование Font Awesome 5 Pro

<!doctype html>
<html>
  <head>
    <!-- Place your kit's code here -->
    <script  src="https://kit.fontawesome.com/97446b8f60.js" crossorigin="anonymous"></script>
    <style type="text/css">
      .f_icon:after{
         content: "\f164";
        font-family: 'Font Awesome 5 Pro';
        font-weight: 900;
      }
    </style>
  </head>
  <body>
    <div class="f_icon"></div>
  </body>
</html>

Кажется, это известная ошибка, которая еще не исправлена ​​(https://github.com/FortAwesome/Font-Awesome/issues/16054), и ваш код должен нормально работать, когда ошибка будет исправлена.

Стоит отметить, что использование FontAwesome также исправит вашу проблему, потому что в настройках V4 по умолчанию включен

enter image description here

Вы заметите, что значок не тот же: 

<!doctype html>
<html>
  <head>
    <!-- Place your kit's code here -->
    <script  src="https://kit.fontawesome.com/97446b8f60.js" crossorigin="anonymous"></script>
    <style type="text/css">
      .f_icon:after{
         content: "\f164";
        font-family: 'FontAwesome';
        font-weight: 900;
      }
    </style>
  </head>
  <body>
    <div class="f_icon"></div>
  </body>
</html>

Если вы проверите код, то увидите загруженные файлы:

enter image description here

0 голосов
/ 11 января 2020

Kitnumber. js не является отдельным js, вы должны добавить свой числовой код, заданный таким шрифтом, как этот, сначала введите свой адрес электронной почты, затем код будет отправлен на вашу почту. enter image description here

Это номер вашего комплекта,
Затем в вашем css есть проблема, добавьте 

content: "\25AE";  /* that is your text. You can also use UTF-8 character codes*/
font-family: FontAwesome;
...