切换Font Awesome 7 后图标变形解决

Lo-Y-eH2025-08-20 15:58

问题

如果从低版本更新到Font Awesome 7，可能出现问题：图标和文字垂直排列

切换前效果

切换到第七版后：

解释

这个问题是因为 Font Awesome 7 版本对图标的默认样式进行了重大更新，新版本的图标默认是块级元素 (display: block)，而不是之前版本的行内元素 (display: inline)，导致图标和文字垂直排列。

修复

在 CSS 中添加以下样式来修复：

css 复制代码

/* 修复 Font Awesome 7.0.0 图标显示问题 */
#artDetail .reprint-info i {
    display: inline !important;
    margin-right: 5px;
}

/* 通用修复，确保所有 Font Awesome 图标都是行内显示 */
.fas, .fab, .far, .fal, .fad, .fass, .fasr, .fasl, .fa-solid, .fa-brands, .fa-regular {
    display: inline !important;
}

说明：

通过添加 display: inline !important 强制图标保持行内显示
margin-right: 5px 为图标和文字之间添加适当间距