这问题我之前折腾过好一会儿！Font Awesome 5里**常规（Regular）和实心（Solid）**图标共享同一个Unicode值，它们的区别完全由font-weight属性控制——默认的字体权重不足以触发实心样式，所以你只需要给伪元素加上对应的权重就行。

关键解决方案 #

Font Awesome 5 Free版本的实心图标要求font-weight: 900;（Pro版本的其他样式比如Light会用不同权重，但Free版实心统一是900），修改你的CSS代码如下：

label.star:before {
  content: '\f005';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900; /* 这行是触发实心图标的核心 */
}

原理补充 #

Font Awesome 5把不同样式的图标打包进了同一个字体文件，通过不同的font-weight值来映射不同的图标样式：

• 常规（Regular）图标对应font-weight: 400;（默认值）
• 实心（Solid）图标对应font-weight: 900;
• 如果是Pro版的Light样式，对应font-weight: 300;

这样修改后，你的星星图标就会显示成实心的啦！

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