3

我正在使用 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，这没有任何区别。

在此先感谢 - 凯丝

4

1 回答 1

3

看起来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>
于 2018-02-18T00:36:19.670 回答