最省事方式是直接引入 font awesome cdn 并用 标签插入图标，再套 放文字；需注意 v5 用 fas、v6 改为 fa-solid，避免混用导致不显示，同时兼顾 vertical-align 对齐、可访问性（如 aria-hidden）及响应式适配。
用 <i></i> 标签加字体图标（如 Font Awesome）最省事
直接引入 Font Awesome CDN，用 <i></i> 标签插入图标，再套一层 <span></span> 放文字，结构干净、语义清晰、改起来快。
常见错误是把图标当图片硬塞 <img>，结果缩放糊、颜色难改、加载还多一次 HTTP 请求。
- 必须加
class="fa fa-home"这类类名（注意版本差异：v5 用fas，v6 改成fa-solid） - 图标和文字默认基线不齐，加
vertical-align: middle或用 Flex 布局微调 - 别在
<i></i>里写文字内容——它本意是斜体，不是图标容器；虽然能用，但可访问性差
background-image + padding-left 适合定制化图标
当你需要 SVG 图标、特定尺寸或深色/浅色主题自动切换时，CSS 背景图方案更可控。
典型场景：公司内部系统图标需统一配色，且不能外链第三方字体库。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 图标文件建议用内联 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></span>显式写文字
用 <svg></svg> 内联图标，兼顾语义与样式控制
现代项目首选。SVG 可直接上色、缩放无损、支持伪元素和 CSS 动画，且无需外部依赖。
容易踩的坑是复制粘贴 SVG 后忘了删 width/height 属性，导致响应式失效。
- 删掉原 SVG 的
width和height，保留viewBox，让其随父容器缩放 - 用
fill: currentColor让图标颜色跟随文字色，hover 时改color就能变色 - 导航项用
<a></a>包住整个<svg></svg>+<span></span>，别只包文字，否则点击热区太小 - 如果图标太多，考虑用
<symbol></symbol>+<use></use>提取复用，但注意 IE 不支持<use></use>外链
文字对齐、间距和可访问性最容易被忽略
图标导航看着简单，但用户用键盘 Tab 导航、用屏幕阅读器听的时候，很多实现直接“失声”。
比如只靠视觉隐藏文字、用伪元素插图标、没设 role="navigation"，都会让辅助技术无法识别。
- 每个导航项必须是
<a></a>或带href的<button></button>，禁用<div onclick> <li>图标若无信息量（比如纯装饰），加 <code>aria-hidden="true"；若有含义（如“搜索”放大镜），必须配aria-label或用<span class="sr-only"></span>屏幕阅读器专用文本 - 横向导航建议用
display: flex控制间距，别靠margin硬推——响应式断点时容易错位 - 小屏折叠菜单前，先测键盘 Tab 顺序是否仍符合视觉流，别让焦点跳到不可见区域 图标导航不是“加个图+写个字”就完事，真正卡住人的永远是细节：对齐偏差 2px、Tab 键跳过图标、暗色模式下图标消失、缩放后文字被截断。动手前先想清楚这个导航谁在用、在哪用、怎么用。
