最省事方式是直接引入 Font Awesome CDN 并用 <i> 标签插入图标，再套 <span> 放文字；需注意 v5 用 fas、v6 改为 fa-solid，避免混用导致不显示，同时兼顾 vertical-align 对齐、可访问性（如 aria-hidden）及响应式适配。
用 <i> 标签加字体图标（如 Font Awesome）最省事
直接引入 Font Awesome CDN，用 <i> 标签插入图标，再套一层 <span> 放文字，结构干净、语义清晰、改起来快。
常见错误是把图标当图片硬塞 <img>，结果缩放糊、颜色难改、加载还多一次 HTTP 请求。
- 必须加
class="fa fa-home"这类类名（注意版本差异：v5 用fas，v6 改成fa-solid） - 图标和文字默认基线不齐，加
vertical-align: middle或用 Flex 布局微调 - 别在
<i>里写文字内容——它本意是斜体，不是图标容器；虽然能用，但可访问性差
background-image + padding-left 适合定制化图标
当你需要 SVG 图标、特定尺寸或深色/浅色主题自动切换时，CSS 背景图方案更可控。
典型场景：公司内部系统图标需统一配色，且不能外链第三方字体库。
立即学习“前端免费学习笔记（深入）”；
- 图标文件建议用内联 SVG 或 data URL，避免额外请求；
background-image: url("data:image/svg+xml,...") - 用
background-size: contain保证缩放不失真，background-repeat: no-repeat防止平铺 -
padding-left值要略大于图标宽度（比如图标宽 16px，设padding-left: 24px），留出间距 - 记得为屏幕阅读器加
aria-hidden="true"，并在旁边用<span>显式写文字
用 <svg> 内联图标，兼顾语义与样式控制
现代项目首选。SVG 可直接上色、缩放无损、支持伪元素和 CSS 动画，且无需外部依赖。
容易踩的坑是复制粘贴 SVG 后忘了删 width/height 属性，导致响应式失效。
- 删掉原 SVG 的
width和height，保留viewBox，让其随父容器缩放 - 用
fill: currentColor让图标颜色跟随文字色，hover 时改color就能变色 - 导航项用
<a>包住整个<svg>+<span>，别只包文字，否则点击热区太小 - 如果图标太多，考虑用
<symbol>+<use>提取复用，但注意 IE 不支持<use>外链
文字对齐、间距和可访问性最容易被忽略
图标导航看着简单，但用户用键盘 Tab 导航、用屏幕阅读器听的时候，很多实现直接“失声”。
比如只靠视觉隐藏文字、用伪元素插图标、没设 role="navigation"，都会让辅助技术无法识别。
- 每个导航项必须是
<a>或带href的<button>，禁用<div onclick> - 图标若无信息量（比如纯装饰），加
aria-hidden="true"；若有含义（如“搜索”放大镜），必须配aria-label或用<span class="sr-only">屏幕阅读器专用文本 - 横向导航建议用
display: flex控制间距，别靠margin硬推——响应式断点时容易错位 - 小屏折叠菜单前，先测键盘 Tab 顺序是否仍符合视觉流，别让焦点跳到不可见区域
