Vue.js组件按钮前添加FontAwesome图标显示异常问题

首先，既然按钮外的图标能正常渲染，说明全局的FontAwesome配置是没问题的，问题大概率出在按钮的样式或者Vue组件的样式作用域上，结合你用SCSS管理样式的情况，给你几个排查和解决的方向：

1. 检查按钮的行高与垂直对齐样式 #

有时候按钮的行高、垂直对齐设置会干扰图标的渲染，尤其是用了SCSS全局按钮样式或者混合宏的情况：

// 调整按钮基础样式，避免截断图标
.btn {
  line-height: 1;
  vertical-align: middle;
}

// 给图标单独加基础样式确保渲染正常
.fa-phone {
  display: inline-block;
  font-size: inherit; // 继承按钮字体大小，避免图标尺寸异常
}

2. 处理Vue组件的样式作用域穿透 #

如果你的组件用了scoped属性，可能会导致FontAwesome的全局样式无法作用到按钮内的图标。可以试试这两种方法：

• 给图标外层元素加全局类名，在全局SCSS文件中编写对应的样式（不要放在带scoped的style标签里）
• 使用Vue的深度选择器::v-deep穿透作用域，强制让样式生效：

<style scoped lang="scss">
.btn {
  ::v-deep .fa-phone {
    font-family: "Font Awesome 6 Free"; // 手动指定字体，对应你使用的FontAwesome版本
    font-weight: 900; // 实心图标需要指定这个权重才能正常显示
  }
}
</style>

注意：如果是FontAwesome 5版本，字体名要改成"Font Awesome 5 Free"。

3. 确认图标标签写法的一致性 #

确保按钮内的图标标签和外部正常显示的写法完全一致，比如不要漏写样式前缀：

<!-- 正确示例（以FontAwesome 6实心图标为例） -->
<button class="btn">
  <span><i class="fa-solid fa-phone"></i></span> 联系我们
</button>

4. 清除缓存并重新编译 #

有时候浏览器缓存了旧的CSS文件，导致新的FontAwesome样式没生效：

• 用Ctrl+Shift+R强制刷新页面，清除浏览器缓存
• 重启Vue开发服务器，重新编译项目

如果以上方法都没解决问题，可以把按钮的完整代码和对应的SCSS样式贴出来，我再帮你进一步排查~

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