主页 / coding / 问题 / 77995416
Accepted
Eric G
Asked: 2024-02-14 23:27:30 +0800 CST

为什么使用 CodePen 时不显示免费的 fontawesome 图标？

  • 772

CodePen 是https://codepen.io/ericg_off/pen/wvORewY

CSS 是：

.fa-test {
  font-family: "Font Awesome 6 Free";
}

HTML 是：

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">

<div class="fa-test">
  &#xf007
</div>

<div class="fa-test">
  &#xf3c5
</div>

CodePen 结果如下所示：

代码笔结果

FontAwesome 确实将 f3c5（位置点）显示为免费图标......

真棒字体

位置点

我正在使用的另一个免费图标 f007（用户）确实有效。

有点奇怪的是，如果我将相同的代码与 Stack Overflow 代码片段一起使用，则会显示位置点图标。

.fa-test {
  font-family: "Font Awesome 6 Free";
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">

<div class="fa-test">
  &#xf007
</div>

<div class="fa-test">
  &#xf3c5
</div>

我需要对 CodePen 的使用方式进行哪些更改，以便在使用 FontAwesome 6.5.1 时显示免费位置点图标？

html

1 个回答

  1. Best Answer

    在 css 类中将 font-weight 设置为 900。

    • 2

相关问题