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

FontAwesome

问题解决

发布日期: 2025-08-20

更新日期: 2025-08-30

文章字数: 208

阅读时长: 1 分

阅读次数:

问题

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

切换前效果

切换后效果

解决

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

在 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;
}