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

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

转载作者：行者123 更新时间：2023-11-27 23:09:08

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 unicode

Font Awesome 5, why is css content not showing?

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

25

4

0

文章推荐： c++ - 如何让 boost::thread 休眠 N 个滴答？

文章推荐： javascript - 将从 AJAX 调用的内容用于另一个 AJAX 调用

文章推荐： html - 无法对齐 span 元素内的 ionicons

css - 三个水平正方形|正方形| |正方形| |正方形|使用 CSS
我试图使用显示正方形(如元素符号正方形) .squares{ list-style-type: square; display:inline; } 但我希望它们是水
html - 嵌套 DIV - 4 个 div(正方形)，其中 1 个有 4 个 div(正方形)，其中 1 个有 4 个 div(正方形)
这是关于在作为 4 个 div 的一部分的 1 个 div 中嵌套 4 个 div(正方形)... 我在包装器中使用 display: flex 并用于包装的元素本身，否则它不会工作对我来说，这感觉
python - 有什么方法可以从图像中提取变形的矩形/正方形？
这是图像，我想填充此矩形或正方形的边缘，以便可以使用轮廓对其进行裁剪。到目前为止，我所做的是我使用了canny边缘检测器来找到边缘，然后使用bitwise_or或将这个矩形填充了一点，但没有完全填充。
c# - 在图片框内动态创建点/正方形
我希望能够在图片框内创建 X x Y 数量的框/圆圈/按钮。完全像 Windows 碎片整理工具。我尝试创建一个布局并不断向其添加按钮或图片框，但速度非常慢，在添加 200 个左右的图片框后它崩溃，
python - 使用skimage python从图像中选择具有特定度量的区域(正方形)
我正在尝试从图像(肺部图像)中提取 3 个区域，这些区域在软组织中显示，每个区域都是具有特定高度和宽度的正方形，例如宽高各10mm，如下图，如图所示，该区域也是均匀的，这意味着它只包含相同的颜色(在
java - 尝试用鼠标移动四边形/正方形 - LWJGL
在我左键单击它后，我试图让一个正方形跟随我的鼠标。当我右键单击时，方 block 应该停止跟随我的鼠标。我的程序检测到我在方 block 内单击，但由于某种原因，它没有根据 Mouse.getDX/
c - 将二维数组划分为所有可能的 nxn 正方形
已经花了几个小时在这上面了(因为我还在学习)，所以也许你们可以帮忙。问题是我无法弄清楚如何将二维数组划分为所有可能的 nxn 正方形。我正在随机化二维数组，可以说它是这样的: 1 0 1 0 2
facebook - 正方形 Facebook 图片
使用 Graph API，我可以获得小型、大型、中型图片。或者我可以获得小方形图片。但是我怎样才能得到大方形图片呢？有什么服务可以使用吗？最佳答案很简单，我刚发现这个。例子， https://
html - CSS
正方形
我是 HTML 和 CSS 的新手。尝试创建 3 x 3 正方形“图片”，使用，但无法找到将正方形放在页面中间的简单解决方案，例如中间有九个正方形。如何把所有的方 block 都放在大边框的正方
CSS动画圆-三 Angular -正方形
我正在玩弄 CSS 动画以获得乐趣。我有限的经验阻碍了这一进程。下面的脚本将圆形转换为三 Angular 形，再转换为正方形，然后反转。然而，圆形和三 Angular 形之间的动画有一个小错误。我希
html - 如何在网格中正确排列(不同的)正方形？
我的标准布局(最小宽度 1024 像素)有 4 行。第一个和最后一个有 6 个正方形，中间有两个组合正方形。但是第三行的第一个方 block 不见了。我没有使用不同的 CSS 设置。我试过 clear
javascript - 带正方形的特殊布局 div 正方形
关闭。这个问题需要更多focused .它目前不接受答案。想改进这个问题吗？更新问题，使其只关注一个问题 editing this post . 关闭 7 年前。 Improve this q
html - CSS 图像定位(正方形)
我的网站上有 4 张图片，我试图对其进行定位，以便它们在我的 DIV 中形成一个相等的正方形，但它看起来像一条由 4 张图片组成的垂直线。我希望它看起来像 2 个图像的 2 条垂直线，彼此相邻，使其成
OpenCV 正方形 : filtering output
这是方 block 检测示例的输出我的问题是过滤这个方 block 第一个问题是它为同一区域绘制多条线；第二个是我只需要检测对象而不是所有图像。另一个问题是我必须只取除所有图像之外的最大对象。检
python - 矢量化行进立方体(正方形) - 将直线连接成曲线
我正在绘制一个带有移动立方体(正方形，因为它是 2d)算法的元球。一切都很好，但我想将其作为矢量对象获取。到目前为止，我已经从每个事件方 block 中得到一两条矢量线，将它们保存在列表线中。换句话
android - 如何用手指移动 OpenGL 正方形？
实际上，我有一个适用于 Android 1.5 的应用程序，其中包含一个 GLSurfaceView 类，它在屏幕上显示一个简单的方形多边形。我想学习如何添加一个新功能，即移动用手指触摸的方 blo
java - 制作一个 JPanel 正方形
如果我有一个包含多个子组件的 JPanel，我该如何使 JPanel 保持正方形，而不管其父组件的大小如何调整？我尝试了以下代码的变体，但它不会导致子组件也变成正方形。 public void pai
android - 如何保持 TextView 正方形？
我找到了 this answer ，它确保 ImageView 的宽高比得以保留。我如何使用带有可绘制背景的 TextView 来做到这一点？我有这个 TextView: 这是我的背
html - 基于高度的 CSS 正方形
这个问题在这里已经有了答案: Maintain aspect ratio of a div according to height [duplicate] (1 个回答) 关闭 8 年前。是否可以
html - 连接圆 Angular 正方形
如何创建 div Logo ，如下图所示: 这是我在 JsFiddle 中创建的主要问题是如何将两个形状如下图的盒子连接起来，有人可以提出建议吗？ body,html { width: 100%

首页

博学

6Ren·AI

商城

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

`font-weight:900`