gpt4 book ai didi

html - 伪元素上的 Font Awesome 5 显示正方形而不是图标

转载 作者:行者123 更新时间:2023-11-27 23:09:08 25 4
gpt4 key购买 nike

我正在尝试更改 span 的内容直接从 CSS 页面使用 Font Awesome 图标,但似乎无法使其正常工作。

1) 我已经从文档和 <head> 中导入了 FA

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">

2) 我的 html 看起来像这样:

<span class='myClass'>Movies</span>

3) 现在假设我想直接从 CSS 页面使用图标更改 span 的内容。

我的 css 目前看起来像这样,但它不起作用,它给了我一个正方形而不是图标。

.myClass {
font-size:25px;
}

.myClass::after {
font-family: 'Font Awesome 5 Free';
content: '\f008';
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css">
<span class='myClass'></span>

有趣的是,它看起来像是在使用一些图标。如果我用 content: '\f007'; 测试有用。知道为什么吗?

(如果你想知道为什么我要直接在 CSS 中更改图标,那是因为我使用媒体查询所以我不能直接在 HTML 页面中添加它)

最佳答案

如果您使用的是JS+SVG 版本,请阅读:Font Awesome 5 shows empty square when using the JS+SVG version

你需要添加

font-weight:900

.myClass {
font-size:45px;
}

.myClass::after {
font-family: 'Font Awesome 5 Free';
content: "\f008";
font-weight: 900;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<span class='myClass'></span>

regular图标版本,默认定义font-weight , 是 PRO 所以它会显示一个空方 block 。你需要的是 solid版本:

https://fontawesome.com/icons/film?style=solid

CSS fontawesome 5 pseud element font weight

为什么其他图标有效?

因为 \f007这个图标是:https://fontawesome.com/icons/user?style=regular如您所见,regular一个不是 PRO,包含在免费包中,因此您无需指定 font-weight .只有当你想显示 solid 时才需要指定它版本。

.myClass::after {
font-family: 'Font Awesome 5 Free';
content: "\f007";
visibility: visible;
font-weight: 900;
}

.myClass-1::after {
font-family: 'Font Awesome 5 Free';
content: "\f007";
visibility: visible;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">
<span class='myClass'>Solid </span>
<br>
<span class='myClass-1'>Regular </span>


作为旁注,所有 lightduotone版本包含在 Pro 包中,因此无论 font-weight 总是显示空方 block 用过


您可以查看文档以获取更多详细信息:https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements

Font Awesome 5 - pseudo element


相关问题

Font Awesome 5 shows empty square when using the JS+SVG version

Font Awesome 5 unicode

Font Awesome 5, why is css content not showing?

关于html - 伪元素上的 Font Awesome 5 显示正方形而不是图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58626124/

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