使用Font Awesome 6 Pro时如何正确渲染solid实心样式图标

实心样式不生效的核心原因是**font-family属性值配置错误**，Font Awesome 6 系列不同样式对应独立的字体族名称，无法仅靠修改font-weight在通用字体族下切换样式，就算设置了font-weight: 900也会默认渲染当前引入的常规线框样式。

正确代码 #

将伪元素样式修改为如下内容即可渲染Solid实心样式：

content: "\f0dc";
/* 必须显式指定Solid样式对应的专属字体族 */
font-family: 'Font Awesome 6 Pro Solid';
padding-left: 5px;
/* Solid样式默认字重即为900，该行可保留可删除，不影响渲染效果 */
font-weight: 900;

额外排查项 #

如果修改字体族后仍不生效，按以下点检查配置：

• 确认已经完整引入Font Awesome 6 Pro的Solid字体资源：如果仅引入了Regular常规样式的CSS、字体文件，就算字体族名称写对也无法加载实心样式，需检查引入资源中是否包含fa-solid对应的字体定义。
• 确认版本命名匹配：如果是从Font Awesome 5升级的项目，FA5的Solid字体族名为Font Awesome 5 Pro Solid，不要写错版本号。
• 如果采用按需加载、JS动态渲染的方式引入FA，需确认Solid图标子集没有被排除，且没有全局配置强制将图标默认样式设为Regular。

内容的提问来源于stack exchange，提问作者Griffin Pair