最简单解法是给图标加vertical-align: middle并设明确line-height；更稳方案是按钮设display: flex和align-items: center，确保图标为inline-block、避免vertical-align干扰，并统一字号与尺寸单位。
直接用 <i></i> 套 Font Awesome 类是最省事的方案，但容易在缩放、对齐、可访问性上翻车；真正稳定的方案得看场景选——字体图标适合通用按钮，SVG 内联更适合需要配色联动或状态变化的按钮，纯 CSS 背景图只适合固定尺寸、低维护需求的按钮。
用 Font Awesome 字体图标时，为什么图标和文字不对齐？
本质是行内元素基线（baseline）对齐导致的视觉偏移，不是“没居中”，而是 <i></i> 默认按字母底部对齐，文字也按同一基准线排布，但图标字形中心通常不在那里。
- 最简单解法：给图标加
vertical-align: middle，同时确保按钮有明确line-height（比如line-height: 1.5） - 更稳的解法：把按钮设为
display: flex; align-items: center，图标和文字变成 flex 项目，天然垂直居中 - 别漏掉：如果用了
font-size缩放图标，记得同步调line-height或用em单位保持比例 - 警告：
fab fa-github这类品牌图标和fas fa-search的宽度、x-height 不一致，混用时可能造成左右晃动，建议统一前缀或加width: 1em限定
SVG 内联图标比字体图标强在哪？
核心优势就两点：颜色能随按钮状态实时响应，且不依赖外部字体文件加载——尤其在首屏按钮或离线场景下，不会出现图标闪白或 fallback 文字。
- 直接把精简后的 SVG 写进
<button></button>里，删掉<?xml>和多余xmlns（保留viewBox和path就够） - 用
fill="currentColor"让 SVG 颜色继承按钮的color值，hover 时改color就自动变色 - 加
vertical-align: middle和margin-right控制图文间距，避免基线错位 - 注意：不要给 SVG 设固定
width/height后再用em单位缩放，容易失比例；推荐用width="1em"+height="1em"+font-size统一控大小
用 CSS background-image 加图标，哪些坑必须避开？
这种方法看似简单，实则对尺寸、定位、响应式极其敏感，稍不注意就会图标错位、拉伸、或在高 DPI 屏幕模糊。
- 图标 PNG 必须是整数倍尺寸（如 16×16、24×24），且用
background-size: 16px显式声明，别依赖默认缩放 -
padding-left要 ≥ 图标宽 + 间距（例如图标 16px + 右边空 8px = 至少 24px），否则文字会盖住图标 - 别用
background-position: left center，改用background-position: 12px center（具体数值 = padding-left - 图标宽 / 2），才能真居中 - 高 DPI 屏幕下，PNG 图标会糊——要么换 SVG base64（
url("data:image/svg+xml,...")），要么放弃此法
伪元素 ::before 插图标，适合什么场景？
只适合图标极简、无需交互、也不需独立控制颜色/尺寸的按钮，比如纯装饰性小圆点、箭头或 Unicode 符号。
- 用
content: "→"或content: "\f054"（Font Awesome Unicode）可以免 DOM 节点，但后者需确保字体已加载且未被拦截 - 必须给按钮设
position: relative，伪元素才好用absolute定位 - 垂直居中靠
top: 50%; transform: translateY(-50%)，别用line-height硬调，否则多行文字会崩 - 致命限制：伪元素无法绑定事件、不能用
focus状态、也不能被屏幕阅读器识别——所有需要语义或交互的图标，别走这条路
真正难的不是“怎么加图标”，而是“加完之后它还在正确位置、正确颜色、正确语义、正确可访问”。字体图标省事但不可控，SVG 稍重但可靠，背景图快但脆弱——选哪条路，取决于你愿不愿意为那个小图标多写几行 CSS 或多传一个 SVG 文件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
