通过CSS伪元素添加Font Awesome 5图标不显示问题排查

开发者阿泽

2026-10-12

问题排查及解决方案

无法正常显示的常见遗漏配置如下：

图标归属库匹配错误
你使用的\f057（对应圆形叉号图标）属于Font Awesome 5 Free通用图标库，不属于Brands品牌图标库，因此.form-field::before中设置font-family: "Font Awesome 5 Brands"完全匹配不到对应资源，必然无法显示。Brands字体仅支持品牌类图标编码，仅可用于调用各大社交平台、企业logo类专属图标。
父元素缺失定位属性
伪元素设置了position: absolute，如果父元素.form-field没有设置position: relative/absolute/fixed属性，伪元素会相对于整个页面根节点定位，大概率偏移到可视区域外，看起来就像没有显示。
缺失必要的字体渲染属性
Font Awesome 5要求伪元素调用图标时必须补充font-style: normal，避免浏览器默认给伪元素添加斜体样式，导致字体匹配失败无法渲染。
伪元素重叠问题
你设置的两个伪元素都没有配置top/left/right/bottom定位偏移值，默认会堆叠在父元素左上角，且z-index完全相同，就算渲染成功也只能看到一个图标。

修正后的代码示例

首先补充父元素的定位配置：

.form-field {
  position: relative;
  /* 保留你原有的.form-field其他样式 */
}

修正后的伪元素样式：

.form-field::before{
    font-family: "Font Awesome 5 Free";
    content: "\f057";
    position: absolute;
    font-weight: 900;
    font-style: normal;
    font-size: 40px;
    left: 0;
    top: 0;
    z-index: 200;
}

.form-field::after{
    font-family: "Font Awesome 5 Free";
    content: "\f057";
    position: absolute;
    font-weight: 900;
    font-style: normal;
    font-size: 40px;
    right: 0;
    top: 0;
    z-index: 200;
}