Question

我正在使用FA和：之前使用图标而不是子弹。

有些unicode字符有效，有些则无效。例如，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：在我的CSS规则之前 - 我已经添加了这个用于说明。

在FA网站（https://fontawesome.com/icons?d=listing&m=free）上，我将列表过滤为仅显示免费套装中包含的图标。

此外 - 图标是空心的 - 我按照FA网站上的说明操作，并将字体重量设置为900，以获得实心图标，但没有任何区别。

提前致谢 - Cath

Answer 1

看起来u+f008字体/版本中没有字形;它根本就不存在。

根据https://fontawesome.com/icons?d=gallery&q=film，您需要使用solid版本而不是regular版本（仅限＆＃34; Pro＆＃34;）。这也适用于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 pseudoelements - 一些unicode字符不起作用

1 个答案: