HTML5中引入icon字体需通过加载CSS文件，再用或加类名渲染；不可用加载字体文件。常见问题包括路径错误、类名不匹配、字体未加载或CSS冲突，应检查Network面板和Computed样式。
怎么在HTML5里引入icon字体（如Font Awesome、iconfont）
直接用 引入CDN或本地CSS文件，再用 或 加类名渲染图标。别写成
- CDN方式最简单：
- 本地部署需确保
woff2/woff文件路径正确，且CSS中@font-face的src指向无误 - 使用时类名必须和字体库文档一致，比如 Font Awesome 6 的
fa-solid fa-home，旧版可能是fa-home，混用会不显示
为什么图标不显示？常见原因和检查点
多数是路径、类名、字体加载顺序或CSS冲突导致，不是HTML5本身限制。
-
Network面板查看.woff2文件是否返回404或403——本地路径错或服务器未配置字体MIME类型 -
浏览器开发者工具的
Computed标签页里，检查元素是否应用了font-family（如"Font Awesome 6 Free"），且content伪元素值存在（如\f015） - 避免在
上直接写文字内容，它会被字体图标的 Unicode 覆盖；需要文字+图标时，用包文字，图标单独放
用 CSS 的 ::before 自定义 icon 字体更可控
比依赖第三方类名更灵活，适合定制化项目或减少CSS体积。
- 先定义自己的
@font-face：@font-face { font-family: 'MyIcon'; src: url('icons.woff2') format('woff2'); font-display: block; } - 再为具体符号写规则：
.icon-home::before { font-family: 'MyIcon'; content: '\e900'; /* Unicode码点，从字体生成工具里复制 */ } - 注意：
content中的\e900是十六进制Unicode，不是十进制；如果用的是SVG字体或symbol引用，这套不适用
HTML5里要不要加
不需要。 影响页面缩放和布局，和字体渲染无关。但移动端若未设置，小图标可能因缩放被压缩变形，看起来像“没显示”。
立即学习“前端免费学习笔记（深入）”；
- 真正影响图标清晰度的是
font-size和line-height是否合理，建议显式设置：.icon { font-size: 16px; line-height: 1; } - 部分老Android WebView对
font-display: swap支持差，首屏可能闪动或空白，可改用block或去掉该声明 - 不要用
transform: scale()放大图标——会模糊；优先调font-size
字体图标的本质是字符，不是图像。容易忽略的是：它的可访问性（a11y）默认为零，屏幕阅读器读不出含义。加 aria-label 或 aria-hidden="true" 是上线前必须补的一步。
