正确写法是用引入支持cors的css+字体分离版本，如font awesome需用all.css、iconfont需选web font方案并确保@font-face中字体路径可访问且跨域配置正确。
link 标签引入字体图标库的正确写法
直接用 <link> 引入字体图标库（比如 Font Awesome、Iconfont）是可行的，但必须满足两个前提：CDN 支持 CORS、且提供的是 CSS + 字体文件分离的版本。很多图标库默认只提供 JS 加载方式，<link> 仅加载 CSS 不会自动下载字体文件，结果就是图标显示为方块或空白。
- Font Awesome 官方推荐用
<script></script>，但 v6+ 的 CDN 也支持<link rel="stylesheet">，前提是用完整版 URL（含all.css或fontawesome.css），不能只引fontawesome.min.css—— 后者不包含字体声明 - 阿里 Iconfont 推荐用
<link>，但必须用「Web Font」方式生成的代码，不是「Symbol」或「Unicode」方案；生成后给的<link href="xxx/iconfont.css">才真正有效 - 确保
iconfont.css文件里有@font-face声明，且src指向的.woff2/.woff路径可访问（相对路径需和 CSS 同域，CDN 地址必须带完整协议和域名）
为什么图标不显示？常见三类 link 错误
多数问题出在资源链路断开，不是 HTML 写错，而是引用路径或服务配置没对上。
-
404字体文件：检查浏览器开发者工具 Network 标签页，过滤woff2，看是否返回 404；常见原因是 Iconfont 项目未发布，或 CSS 中的url('./iconfont.woff2')被解析成https://yoursite.com/iconfont.woff2（404）而非 CDN 地址 -
CORS阻止字体加载：若字体文件来自不同源（如 CDN），服务端必须返回Access-Control-Allow-Origin: *；Cloudflare、部分国内 CDN 默认不开放字体跨域，需手动配置 - CSS 优先级覆盖：引入的图标类名（如
iconfont）被其他 CSS 规则重置了font-family或font-size，导致图标不可见；可用getComputedStyle(el).fontFamily在控制台验证
link 引入 vs script 引入的实际差异
不用 <script></script> 而坚持用 <link> 的主要动机是避免阻塞渲染、利于预加载，但代价是灵活性下降。
-
<link rel="stylesheet">是异步加载 CSS，但字体文件仍按需触发请求；而<script src="..."></script>（如 Font Awesome 的 JS 方式）会动态插入@font-face并控制加载时机，支持延迟加载、按需注册图标 -
<link>无法做图标懒加载或条件注册；如果页面只用 3 个图标，却加载整套字体文件（几 MB），浪费带宽 - SEO 友好性无差别：搜索引擎不解析字体图标内容，无论怎么引入，都得靠
aria-label或配套文本补充语义
一个能跑通的 Iconfont link 示例
以阿里 Iconfont 最小可用场景为例，不是复制官网一键生成代码就能用，关键在确认三处：
- 进入 Iconfont 项目页 →「设置」→「生成代码」→ 选「Web Font」→ 复制整个
<link>标签（含href） - 打开该
href对应的 CSS 文件，搜索@font-face，确认src是绝对 URL（如url('//at.alicdn.com/t/c/xxx.woff2')），不是./iconfont.woff2 - HTML 中使用时，必须用 class 名（如
iconfont icon-home），且该 class 在 CSS 中已定义font-family: 'iconfont'；别漏掉iconfont这个基础类
字体图标本质是字符映射，<link> 只负责把样式规则和字体文件拉进来，真正显示靠浏览器渲染文本。哪一环断了，图标就消失——不是代码写错了，而是资源链路没串起来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
