按钮内用标签嵌入font awesome图标最简单，但需引入css、避免空格、加aria-hidden="true"保障可访问性；伪元素方式适合不改dom；注意字体名、font-weight、unicode及垂直对齐。
按钮里直接用 <i></i> 标签嵌入图标
最简单的方式就是把按钮文字替换成 <i></i> 标签，配合 FontAwesome 的类名。前提是项目已正确引入 FontAwesome（CDN 或本地字体文件）。
- 确保 HTML 中已加载 FontAwesome，比如通过 CDN：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
- 按钮内不要留空格或换行，否则可能撑出额外空白：
<button><i class="fas fa-search"></i></button>比<button><i class="fas fa-search"></i> </button>更稳妥 - 如果按钮需要可访问性，加
aria-hidden="true"避免屏幕阅读器误读图标为文字：<i class="fas fa-search" aria-hidden="true"></i>
用 CSS 的 ::before 伪元素添加图标（不改 HTML 结构）
适合已有大量按钮、不想动 DOM 的场景。用 CSS 注入图标，按钮内容仍可保留文字或作备用。
- 给按钮加自定义 class，比如
btn-search，然后写：.btn-search::before {<br> font-family: "Font Awesome 6 Free";<br> content: "\f002"; /* Unicode for fa-search */<br> font-weight: 900;<br> margin-right: 4px;<br>} - 注意：FA6 使用
"Font Awesome 6 Free"字体名，FA5 是"Font Awesome 5 Free"；font-weight必须匹配——solid 图标用900，regular 用400 -
content的 Unicode 值要查官方文档或图标详情页，不能直接写fa-search
按钮文字和图标共存时的对齐问题
图标和文字高度不一致是高频坑，尤其在小尺寸按钮里容易上下偏移。
- 优先用
display: inline-flex+align-items: center控制垂直居中：button { display: inline-flex; align-items: center; } - 避免只靠
vertical-align: middle，它依赖行高基线，不稳定 - 图标默认是内联元素，加上
font-size后建议同步设置line-height: 1防止行高干扰 - 如果用伪元素，
margin比padding更安全——不会影响按钮点击热区
FA 图标在按钮中不显示的常见原因
不是代码写错，往往是环境或配置层面的问题。
- 检查浏览器控制台是否有
Failed to load resource: net::ERR_ABORTED，说明 FontAwesome CSS 或字体文件没加载成功 - FA6 默认只启用 solid 图标，如果用了
far fa-star却没引入 regular 字体包，图标就为空白 - 某些 CDN 地址被拦截（如国内访问 cdnjs 可能慢或失败），可换 jsDelivr：
https://cdn.jsdelivr.net/npm/font-awesome@6.5.0/css/all.min.css - Vue/React 等框架中动态渲染按钮时，确保 FontAwesome CSS 在组件挂载前已加载完成，否则首屏图标可能闪一下才出现
实际项目里，图标是否可交互、要不要支持禁用态、是否需响应式缩放，都会影响最终写法。这些细节往往比“怎么加图标”本身更耗时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
