标签可显示webfont图标但不推荐裸用，因其无语义、无障碍差，且依赖类名（如iconfont icon-home）、字体加载成功及font-family声明，缺一即显示方块或空白。
直接用 <i></i> 标签配 WebFont 图标是可行的，但容易出错——关键不在标签本身，而在类名绑定、字体加载时机和语义缺失这三处。
为什么 <i></i> 标签能显示图标，但不推荐裸用
WebFont 图标（如 Font Awesome、iconfont.cn 下载的字体）本质是把 Unicode 字符映射为图形，<i></i> 标签只是个无语义的容器，靠添加类名（如 fa fa-home）触发伪元素 ::before 插入对应字符。但它没语义、无障碍支持差，且一旦 CSS 未加载或类名拼错，页面就留个空格或方块。
- 不要只写
<i class="icon-home"></i>，必须确保该类已定义font-family和content - 避免用
<i></i>表达有明确含义的操作（如“删除”“设置”），应优先用<span role="img" aria-label="设置"></span> - 若项目已用 CSS Modules 或 Shadow DOM，全局字体声明可能失效，需显式继承
font-family
font-face 加载失败时图标变方块？检查这三点
方块（□）或问号（）不是字体问题，而是字符未被正确解析或字体未就绪。常见于动态插入图标或首屏渲染快于字体加载。
- 确认
@font-face的src路径正确，且服务器返回Content-Type: font/woff2（尤其本地开发时易因 webpack 配置漏处理.woff2） - 避免在
display: none容器里提前渲染图标——部分浏览器会跳过字体下载 - 用
font-display: swap（而非block）让文本先显示，图标异步替换；但需配合unicode-range减少字体体积
如何让图标真正响应式且不糊
矢量图标本不该糊，但实际中常因 CSS 缩放或父容器限制失真。核心是控制渲染尺寸与字体度量对齐。
- 不要用
width/height强制缩放<i></i>，改用font-size控制图标大小（它直接驱动字体渲染尺寸） - 如果图标上下留白异常，检查字体的
line-height和vertical-align；建议设为vertical-align: middle并统一父容器line-height: 1 - 导出 WebFont 时，用 IcoMoon 或 fontmin 工具剔除未使用的 Unicode 码位，避免字体过大拖慢加载
最麻烦的其实是图标更新后缓存不一致：CDN 返回旧字体文件，但 CSS 里的 content 值已变，结果显示错图标。上线前务必清空字体缓存，并在 @font-face 的 url() 后加版本参数，比如 icon.woff2?v=2.3.1。
