HTML5不直接显示图标，需通过<img>标签引入SVG/PNG、iconfont字体或内联SVG实现；常见问题包括路径错误、MIME类型不符、CSS未生效及跨域限制。
HTML5 本身不直接“出现图标”，图标显示依赖于你如何引入和使用图标资源。常见方式是用 <img> 标签引入位图（如 PNG、SVG），或通过 iconfont（字体图标）配合 CSS 引入矢量图标。关键不在 HTML5 版本，而在引入方法是否正确、路径是否有效、样式是否生效。
用 <img> 标签引入图标（适合单个、简单图标）
这是最直接的方式，适用于 PNG、GIF、SVG 等图像文件：
- 确保图标文件路径正确（相对路径建议以项目根目录为基准，如
./assets/icon-home.png） - 推荐使用 SVG 格式：缩放不失真、体积小、可被 CSS 控制颜色（需内联 SVG 或用
<img src="xxx.svg">） - 加上
alt属性提升可访问性，例如：<img src="icon-search.svg" alt="搜索"> - 若 SVG 不显示，请检查 MIME 类型（服务器是否返回
image/svg+xml）或是否被浏览器拦截（如跨域）
用 iconfont（字体图标）引入（适合多图标、统一管理）
iconfont 是将图标转为字体文件（如 .woff2/.ttf），通过 CSS 类名调用：
- 在 iconfont.cn 创建项目，下载代码包，把
iconfont.css和字体文件放入项目（如./fonts/） - 在 HTML 中引入 CSS：
<link rel="stylesheet" href="./fonts/iconfont.css"> - 使用时写：
<i class="iconfont icon-search"></i>（类名以实际下载的为准） - 确保 CSS 中
@font-face的src路径正确（比如字体文件在./fonts/iconfont.woff2，CSS 里就要写对） - 可加 CSS 控制大小/颜色：
.iconfont { font-size: 16px; color: #333; }
常见不显示原因及快速排查
图标“不显示”通常不是 HTML5 的问题，而是环境或配置疏漏：
立即学习“前端免费学习笔记（深入）”；
- 路径错误：控制台报 404？检查文件位置和引用路径是否拼写一致（区分大小写、斜杠方向）
- CSS 未生效：用浏览器开发者工具（F12）看元素是否加载了对应类名，样式是否被覆盖或未应用
-
SVG 内联问题：如果把 SVG 直接写进 HTML，注意不要遗漏
<svg>根标签和必要属性（如viewBox） -
跨域限制：本地双击打开 HTML（
file://协议）可能禁用字体加载，建议用本地服务器（如 VS Code Live Server）运行
现代推荐：原生 SVG + CSS（轻量可控）
对于少量图标，直接内联 SVG 更可靠，无需额外请求、无跨域风险、支持伪类和动画：
- 复制 SVG 代码（从 Figma、Sketch 或在线图标库导出），粘贴到 HTML 中
- 给
<svg>加 class，用 CSS 控制尺寸/颜色：fill: currentColor可继承文字色 - 示例：
<svg class="icon" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7.18 14.2l-5-4.87 6.91-1.01L12 2z"/></svg>
