如何在CSS中通过伪元素使用Font Awesome图标

前置要求 #

确保你已经在项目中正确引入了对应版本的Font Awesome样式资源，无需额外引入JS文件即可实现伪元素调用。

核心配置步骤 #

• 设置伪元素的font-family属性，需和你使用的FA版本完全匹配：
  • Font Awesome 6 免费版：普通图标用 font-family: "Font Awesome 6 Free";，品牌类图标用 font-family: "Font Awesome 6 Brands";
  • Font Awesome 5 免费版：普通图标用 font-family: "Font Awesome 5 Free";，品牌类图标用 font-family: "Font Awesome 5 Brands";
  • Font Awesome 4 版本：统一用 font-family: "FontAwesome";
• 设置对应font-weight属性，这是最容易遗漏的配置项：
  • 普通实心图标固定设置为 font-weight: 900;
  • 线框类图标、品牌类图标固定设置为 font-weight: 400;
• 设置content属性，值为目标图标对应的Unicode编码，编码前需加反斜杠转义，比如下载图标对应的编码为\f019。

完整示例代码 #

HTML代码 #

<button class="download-btn">下载文件</button>

CSS代码 #

/* 以Font Awesome 5免费版为例，给按钮添加前置下载图标 */
.download-btn::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f019";
  margin-right: 8px;
  display: inline-block; /* 可选，用于调整图标间距、位置时添加 */
}

常见不生效问题排查 #

• 确认引入的Font Awesome版本和CSS中font-family声明的版本一致
• 检查Unicode编码前是否添加了反斜杠转义
• 品牌类图标必须使用对应Brands字体族，不可用普通Free字体族
• 部分特殊场景下可添加display: inline-block避免伪元素渲染异常

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