gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 10:42:02 25 4
gpt4 key购买 nike

我使用 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,但没有什么区别。

提前致谢 - 凯丝

最佳答案

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

根据https://fontawesome.com/icons?d=gallery&q=film您需要使用 solid 版本而不是 regular 版本(仅适用于“Pro”)。这也适用于u+f001u+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>

关于unicode - Font Awesome 和 CSS 伪元素 - 某些 unicode 字符不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48847157/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com