Font Awesome 图标不显示的主因是类名前缀错误或引入位置不当；必须用 fas/fa-solid 等风格前缀，且 <link> 需置于 <head> 顶部、<title> 后其他 CSS 前，避免字体覆盖或加载失效。
直接用 <i> 套 Font Awesome 类名最简单，但必须写对前缀（fas/far/fab），否则图标静默消失；SVG 更可控，但得手动处理 pointer-events 和 vertical-align，否则点击区域或对齐会出问题。
Font Awesome 图标不显示？先查这三件事
常见现象是按钮里只显示方块、字母 F 或空白——不是 CDN 没加载，而是类名或加载顺序错了。
-
<link>必须放在<head>最顶部，<title>之后、其他 CSS 之前；放<body>里或靠后位置，会被后续样式覆盖font-family - Font Awesome 6+ 不再支持
fa fa-home这种写法，必须带风格前缀：fas fa-home（实心）、far fa-clock（线框）、fab fa-github（品牌） - 别把图标类直接塞进
<button class="btn fas fa-download">下载</button>—— 这会让整个按钮文本强制用 Font Awesome 字体，中文变方块。正确写法是分开：<button class="btn"><i class="fas fa-download"></i>下载</button>
SVG 图标嵌入按钮时点击失效或偏移
SVG 默认作为内联元素参与布局，vertical-align: baseline 和 pointer-events: auto 是两个隐藏雷区。
- 给
<svg>加style="vertical-align: middle;"或更精确的vertical-align: -0.125em;，避免和文字基线错位 - 加
style="pointer-events: none;"，否则 SVG 内部<path>可能拦截点击，导致按钮文字旁空白区域不可点 - 宽高推荐用
width="1em" height="1em"，而非固定像素值，这样图标随按钮字体大小缩放，不会溢出或过小 - 如果按钮用了
display: flex，别忘了加align-items: center和gap，比纯vertical-align更稳
选 Font Awesome 还是 SVG？看这三点
没有绝对优劣，取决于你项目当前约束：
立即学习“前端免费学习笔记（深入）”；
- 需要快速上线、图标量大、团队熟悉 CSS 类名 → 选 Font Awesome：CDN 一行引入，类名即文档，维护成本低
- 要求无障碍友好、需动画控制路径、或图标要响应式缩放且不依赖字体渲染 → 选内联 SVG：可直接操作
fill、stroke、transform，无字体加载阻塞 - 图标数量极少（@font-face +
woff2文件，容易 MIME 类型报错，不推荐新手碰
真正容易被忽略的是：Font Awesome 的图标颜色、大小完全走文本流，改 color 和 font-size 就生效；而 SVG 的 fill 默认继承父级 color，但如果你显式写了 fill="#000"，它就不再响应 CSS 变色——这点在主题切换时会突然翻车。
