Font Awesome 和 CSS 伪元素 - 一些 unicode 字符不起作用

Question

我正在使用 FA 和 :before 来使用图标而不是项目符号。

有些 unicode 字符有效，有些则无效。例如，f004（心）、f005（星）和 f2dc（雪花）有效。但 f001（音乐）、f008（电影）和 f046（检查）不起作用。

我正在使用 FA 5.0.6 免费版。

 @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;
}

不 - 我的 CSS 中没有两个 .stars li:before 规则 - 我添加这个是为了说明。

在 FA 网站 (https://fontawesome.com/icons?d=listing&m=free) 上，我过滤了列表以仅显示免费集中包含的图标。

此外 - 图标是空心的 - 我按照 FA 网站上的说明将实心图标的字体粗细设置为 900，但没有任何区别。

提前致谢 - 凯斯

Answer 1

看起来 u+f008 里面没有字形 font/version；它根本不存在。

根据 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>

Font Awesome 和 CSS 伪元素 - 一些 unicode 字符不起作用

Font Awesome and CSS pseudoelements - some unicode characters don't work

unicode

font-awesome-5