Font Awesome и псевдоэлементы CSS - некоторые символы юникода не работают

Я использую FA и: прежде, чем использовать значки вместо пуль.

Некоторые символы Юникода работают, а некоторые нет. Например, f004 (сердце), f005 (звезда) и f2dc (снежинка) работают. Но f001 (музыка), f008 (фильм) и f046 (проверка) не работают.

Я использую FA 5.0.6 Free.

 @font-face {
  font-family: 'awe506';
  src: url("../fontawesome506/fa-regular-400.eot");
  src: url("../fontawesome506/fa-regular-400.eot?#iefix") format("embedded-opentype"), 
      url("../fontawesome506/fa-regular-400.woff2") format("woff2"), 
      url("../fontawesome506/fa-regular-400.woff") format("woff"), 
      url("../fontawesome506/fa-regular-400.ttf") format("truetype"), 
      url("../fontawesome506/fa-regular-400.svg#fontawesome") format("svg"); 
    }
.bulletsamples ul {
  list-style-type: none;
  padding-left: 0;
  margin-left: 2em;
}
.bulletsamples li {
  position: relative;
  padding-left: 2em;
  margin-bottom: 10px;
}
.bulletsamples li:before {
  position: absolute;
  top: 0;
  left: 0;
  font-family: awe506;
  font-weight: 400;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}
.stars li:before {
  content: "\f005"; /*THIS WORKS*/
  color: blue;
}
.stars li:before {
  content: "\f008"; /*THIS DOESN'T WORK*/
  color: blue;
}

Нет - у меня нет двух.stars li:before правила в моем CSS - я добавил это для иллюстрации.

На веб-сайте FA ( https://fontawesome.com/icons?d=listing&m=free) я отфильтровал список, чтобы показать только значки, включенные в бесплатный набор.

Кроме того - значки пустые - я следовал инструкциям на сайте FA и установил значение шрифта 900 для сплошных значков, и это не имело никакого значения.

Спасибо заранее - Кэт

Источник

1 ответ

Решение

Не похоже u+f008 имеет глиф в этом шрифте / версии; его просто нет.

Согласно https://fontawesome.com/icons?d=gallery&q=film вам нужно будет использовать solid версия вместо regular один (который только "Pro"). Это идет для u+f001 также. u+f046 по-видимому, был перемещен в какой-то момент u+f14a,

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
@font-face {
    font-family: awe506;
    src: url(fa-solid-900.woff);
}
.stars {
    font-family: awe506;
}
.stars li:before {
    /*content: '';*/
    content: '\f005';
    color: blue;
}
.stars li:after {
    /*content: '';*/
    content: '\f008';
    color: blue;
}
        </style>
    </head>
    <body>
        <ul class="stars">
            <li>foo</li>
            <li>bar</li>
        </ul>
    </body>
</html>
Источник
Другие вопросы по тегам