Font Awesome 5 не отображает все юникоды - PullRequest
Новая
       24

Font Awesome 5 не отображает все юникоды

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

Я пытаюсь использовать unicodes в css для FA5, но это не всегда работает. Значки работают, если я использую разметку html.

Код ниже, а также скрипку. Вы увидите первые работы, используя значок выравнивания, но второй доступный значок не работает.

https://jsfiddle.net/s6qkcnyb/

  <html>
    <head>
        <title></title>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <style>
            .justify::after {font-family: "Font Awesome 5 Free"; content: "\f039"; white-space:pre; font-weight: 900; }
            .accessible::after {font-family: "Font Awesome 5 Free"; content: "\f368"; white-space:pre; font-weight: 900; }            
        </style>
        
    </head>
    <body>
        <div>This is using html : <i class="fas fa-align-justify"></i></div>        
        <div class='justify'>This is using css : </div>
        
        <hr>

        <div>This is using html : <i class="fab fa-accessible-icon"></i></div>        
        <div class='accessible'>This is using css : </div>

        
    </body>
    </html>

1 Ответ

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

При использовании fab это означает, что font-family должно быть Font Awesome 5 Brands. Вам также может понадобиться исправить font-weight, чтобы получить правильный значок 

.justify::after {
  font-family: "Font Awesome 5 Free";
  content: "\f039";
  white-space: pre;
  font-weight: 900;
}

.accessible::after {
  font-family: "Font Awesome 5 Brands";
  content: "\f368";
  white-space: pre;
  font-weight: 400;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">

<div>This is using html : <i class="fas fa-align-justify"></i></div>
<div class='justify'>This is using css : </div>

<hr>

<div>This is using html : <i class="fab fa-accessible-icon"></i></div>
<div class='accessible'>This is using css : </div>

Связанный: Font Awesome 5 - Выбор правильного семейства шрифтов в CSS псевдоэлементах

...