FontAwesome 4升级到6后，CSS中滑块箭头图标失效如何修复？

开发者阿泽

2026-7-17

解决FontAwesome 6替换后CSS中Unicode图标不显示的问题

问题根源

FontAwesome 6和4相比，在字体族名称、图标权重要求上有明显变化，你之前的CSS代码沿用了FA4的配置，导致滑块按钮图标无法加载：

FA4的字体族统一为FontAwesome，但FA6拆分出了Font Awesome 6 Free、Font Awesome 6 Brands等不同字体族
实心样式（fa-solid）的图标必须设置font-weight: 900，你之前用的font-weight: normal不匹配FA6的权重规则
你用的左右箭头Unicode在FA6中未变更，主要问题集中在前两点

修复步骤

修改CSS代码，调整字体族和权重即可：

.bx-controls .bx-prev:before {
    content: "\f104"; /* FA6中fa-angle-left的Unicode仍为f104 */
    font-family: "Font Awesome 6 Free"; /* 替换为FA6对应的字体族 */
    font-style: normal;
    font-weight: 900; /* 实心图标必须设置为900权重 */
    text-decoration: inherit;
    font-size: 20px;
    position: absolute;
    left: 0px;
    right: 0;
}

.bx-controls .bx-next:before {
    content: "\f105"; /* FA6中fa-angle-right的Unicode仍为f105 */
    font-family: "Font Awesome 6 Free";
    font-style: normal;
    font-weight: 900;
    text-decoration: inherit;
    font-size: 20px;
    position: absolute;
    left: 0px;
    right: 0;
}