为何CodePen中FontAwesome 6.5.1免费location-dot图标无法显示？

在CodePen中使用FontAwesome 6.5.1时，免费图标user（编码）可正常显示，但同为免费图标的location-dot（编码）无法正常渲染；而完全相同的代码在Stack Overflow代码片段中却能正常显示该图标。已确认location-dot属于FontAwesome 6.5.1的免费图标范畴。

只需修改CSS代码，为自定义的.fa-test类添加字体权重声明即可：

.fa-test {
  font-family: "Font Awesome 6 Free";
  font-weight: 900; /* 指定为Solid样式对应的字重 */
}

原因说明 #

FontAwesome 6的免费图标分属不同样式（Regular、Solid等），不同样式对应不同字体权重：

• user图标在Free版本中同时存在Regular和Solid样式，无需指定权重也能匹配到可用样式
• location-dot图标仅存在于Solid样式中，必须指定font-weight: 900才能加载对应的字体子集

如果不想手动控制字体权重，也可以直接使用FontAwesome官方推荐的类名写法，更简洁且不易出错：

<i class="fa-solid fa-location-dot"></i>

内容的提问来源于stack exchange，提问作者Eric G