最常用方式是通过<link>引入CDN版Icon集，需确保URL正确且加载顺序在使用图标前；本地引入需注意路径与MIME类型；Iconify则通过API动态加载SVG图标。
用 <link> 引入 CDN 版本的 Icon 集（最常用）
多数图标库（如 Font Awesome、Remix Icon、Iconify）都提供 CDN 链接，直接在 index.html 的 <head> 里加一行就能用。关键是选对 URL，且注意加载顺序——必须在使用图标的 HTML 元素之前加载。
-
用 Font Awesome 6：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
然后写<i class="fa-solid fa-home"></i>即可 -
用 Remix Icon：
<link href="https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.css" rel="stylesheet">
对应写<i class="ri-home-line"></i> -
不要混用多个 CDN 版本（比如同时引入 FA5 和 FA6），CSS 类名冲突会导致图标不显示
立即学习“前端免费学习笔记（深入）”；
本地引入图标字体文件（离线/定制需求）
当项目不能依赖外网、或需要删减图标体积时，得把字体文件（woff2、css）下到本地。常见错误是路径写错或 MIME 类型没配好。
- 把下载好的
fonts/文件夹和remixicon.css放进项目同级目录（如assets/icons/） - 在
index.html中引用 CSS 时，确保路径相对于 HTML 文件：<link rel="stylesheet" href="./assets/icons/remixicon.css">
- 检查浏览器开发者工具的 Network 标签页：如果
remixicon.woff2显示 404，大概率是remixicon.css里写的url(./fonts/remixicon.woff2)路径跟实际不符，需手动调整或改用绝对路径
用 Iconify API 动态加载（按需、轻量）
Iconify 不预载全部图标，而是通过 JS 在运行时请求 SVG，适合图标数量多但单页只用几个的场景。它不依赖字体，也不怕 CORS。
- 在
<head>加：<script src="https://code.iconify.design/iconify-icon/1.0.8/iconify-icon.min.js"></script>
- 直接写标签即可（无需提前声明）：
<iconify-icon icon="mdi:home"></iconify-icon> - 注意：图标 ID 格式为
前缀:名称（如tabler:settings），必须去 https://www.php.cn/link/d8de81eff6dfe582a05bc6981879f01a 查可用前缀 - 如果页面初始化后才动态插入该标签，需调用
Iconify.render()触发渲染（否则图标空白）
为什么图标不显示？优先排查这三处
图标“写了但看不见”基本就卡在这几个点，比语法错误更隐蔽：
- 浏览器控制台报
Failed to load resource: the server responded with a status of 404 ()：说明 CSS 或字体文件路径 404，不是代码写错了，是部署路径或相对路径算错了 - 图标位置变成方块或问号：检查是否漏了
rel="stylesheet"，或 CDN 链接被广告屏蔽插件拦截（可换镜像源或开无痕模式验证） - 使用了
fa-solid但引入的是 FA Free 版 CDN：FA6 Free 只含fa-solid和fa-brands，不含fa-regular；若用了fa-regular fa-user却只引了 Free CDN，就会回退成空心轮廓甚至不显示
字体图标本质是 CSS + 字符映射，出问题很少是“语法”，大多是路径、权限、版本错位。本地开发时建议先关掉所有浏览器插件验证，再逐步放开条件。
