个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在尝试更改 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
为什么其他图标有效？
因为 \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>作为旁注，所有 light和 duotone版本包含在 Pro 包中，因此无论 font-weight 总是显示空方 block 用过
您可以查看文档以获取更多详细信息:https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements
相关问题
Font Awesome 5 shows empty square when using the JS+SVG version
关于html - 伪元素上的 Font Awesome 5 显示正方形而不是图标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58626124/
25
4
0
我一直在用awesome在 ubuntu 14.04 上一段时间。 rc.lua 中定义的默认布局是: layouts = { awful.layout.suit.floating,
Font Awesome 4.0是对 Font Awesome 从头开始的完全重写。主要的新功能之一是图标现在具有命名空间。除了命名空间之外，图标还使用基于一致性和可预测性的新命名约定。不幸的是，
我有一个带有Bootsrap 4(SASS)和Font Awesome 5的MVC项目。我正在尝试使旋转的图标可以与Ajax加载面板一起使用，但是它不起作用。 Test Spin
似乎 font-awesome 支持自定义图标，并附有详细说明如何创建和提交您自己的图标，但该信息在他们的网站上不再可用。这是否意味着不再支持此功能并且您只能请求由 font-awesome 团队完成
我正在寻找一种让应用程序使用自己的全屏模式但不调整自己的窗口大小的方法。 例如，我想在全屏模式下在网络浏览器上观看视频，以隐藏除视频之外的浏览器/网站的所有其他栏/内容，但我想保留我的显示布局以同时查
如何设置行中显示的图标之间的间距？这是我的代码： 这些图标暂时太靠近了。 最佳答案 只需像其他任何操作一样设置边距即可。纯CSS。 关于font-awesome - Font A
当使用出色的 Font Awesome 时，如何使图标不透明 - 例如，如果我想使用 http://fortawesome.github.io/Font-Awesome/icon/chevron-ci
我正在尝试在 http://fortawesome.github.io/Font-Awesome/examples/ 更改 fontawesome 星级评分中前两颗星的颜色 我已经为第一个和第二个跨度
你好， 我正在努力将 Font Awesome 添加到我的网站。 在 Font Awesome github 页面上，它简单地说: “安装 FontAwesome.otf 并访问复制和粘贴页面。快乐设
我们正在使用和添加/删除某些 js 事件的 fa-spin。在 3x 下很容易看到的问题是齿轮不围绕固定轴旋转。我怀疑这是因为图标本身 (SVG) 被 Chrome 报告为 42 x 49 像素，即使
你好， 尝试使用 Lighthouse 解决 Font Awesome 图标/元素的可识别名称的审计点我不知道如何回答这个挑战:如何使 Font Awesome 元素具有可识别的名称？ actual
我正在尝试自定义我的 Ubuntu 在我的两台电脑上使用 i3-wm , 多边形和 zsh (带有 oh-my-zsh 在其上) 我在我的一台计算机上遇到了一些问题，我在另一台上没有，尽管以相同的方式
如何配置真棒，所以它会启动新的应用程序，两个窗口对齐，如下所示: ---------------- |xxxxxxxxxx####| |xxxxxxxxxx####| |xxxxxxxxxx####|
我已阅读 Setting windows layout for a specific application in awesome-wm .现在我想在自动启动期间在特定标签下执行此操作。 例如: I
减小 Font Awesome 图标大小的最佳方法是什么。有一个 fa-3x 等等……来增加尺寸。有没有减少尺寸的类(class)？ 最佳答案 Font-Awesome 图标，顾名思义，是基于字体的。
我会使用 Font Awesome 中的几个图标。 我发现我们可以下载整个 font-awesome 目录并使用简单的代码，如 并使用fa-camera-retro显示图标。 我可以只下载我将使用的字
在 font Awesome 4 中，您可以使用 CSS 轻松地将图标应用到 :before/:after 元素。 新的 font Awesome 5 JS/SVG 实现是否可以实现同样的效果？据我所
我刚开始在 Awesome 中为 rc.lua 做自定义 lua，我在想出如何根据鼠标位置启动某些东西时遇到了一些麻烦。到目前为止，这就是我所拥有的，但它没有做任何事情。 -- Open todo w
我正在运行我的 NodeJS 服务器并在 localhost:3000 上测试它。一切正常，但字体超棒的图标显示时好像字体文件丢失了。它在 Firefox 和 Chrome 中做同样的事情。 (我什至
我使用了 codeigniter 和 Font Awesome 5 我已经下载了 font awesome 5 的最新版本，但由于某种原因我的图标没有显示出来 Question How to get
我是一名优秀的程序员,十分优秀！