问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

社区维基
1
新手上路，请多包涵

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

  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>
  1. 现在假设我想直接从 CSS 页面更改带有图标的跨度内容。

我的 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 页面中添加它）

原文由 nsayer 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlcssfont-awesomepseudo-elementfont-awesome-5
阅读 1k
2 个回答
得票最新
社区维基
1
✓ 已被采纳

如果您使用的是 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，所以它会显示一个空方块。您需要的是 solid 版本：

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

CSS fontawesome 5 伪元素字体粗细

为什么其他图标有效？

因为 \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 使用的空方块

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

Font Awesome 5 - 伪元素

相关问题

Font Awesome 5 在使用 JS+SVG 版本时显示空方块

字体真棒 5 unicode

Font Awesome 5，为什么不显示 css 内容？

原文由 Temani Afif 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1

从你的评论：

太棒了，谢谢你的解释！你知道如果轻型版本免费的话我需要使用什么字体粗细吗？

测试 text-stroke 使用透明颜色以获得更薄的渲染：

 .myClass {
  font-size: 45px;
}

.myClass::after {
  font-family: 'Font Awesome 5 Free';
  content: "\f008";
  font-weight: 900;
  -webkit-text-stroke;
  transparent 0.2em;
}

.myClass+.myClass::after {
  -webkit-text-stroke: white 0.02em;
}

.bis {
  font-size: 4rem;
  color: blue
}

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<span class='myClass'></span>
<span class='myClass'></span>
<span class='myClass bis '></span>
<u>
<span class='myClass bis '></span></u>

原文由 G-Cyrillus 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题