使用<link>引入图标库需确保CSS文件含@font-face声明且字体路径正确，Font Awesome须用all.min.css并带integrity和crossorigin属性，Iconfont须用Web Font生成的CSS链接并同时应用iconfont和具体图标类名。
<link> 标签引入第三方图标库确实可行，但不是“贴上链接就完事”。多数图标不显示的问题，根源不在 HTML 写法，而在字体文件链路断裂或类名使用错误。
Font Awesome 的 <link> 必须用 all.css 或完整版 URL
v6+ 版本的 Font Awesome CDN 支持 <link rel="stylesheet">，但关键在于选对 CSS 文件：
-
all.min.css✅ 包含所有图标声明 +@font-face字体加载规则 -
fontawesome.min.css❌ 仅含基础样式，不含字体声明，图标必然空白 - 必须带
integrity和crossorigin="anonymous"属性，否则部分浏览器会拒绝加载
正确示例：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha512-..." crossorigin="anonymous">
Iconfont 的 <link> 只能用「Web Font」生成的 CSS 链接
阿里 iconfont 官网提供三种接入方式（Symbol / Unicode / Web Font），只有「Web Font」方案生成的 <link> 才真正有效：
立即学习“前端免费学习笔记（深入）”；
- 登录后进「我的项目」→「生成链接」→ 复制「CSS 链接」（以
https://at.alicdn.com/t/c/font_开头） - 该 CSS 文件里必须有
@font-face声明，且src指向的.woff2等路径可访问 - 不能只复制字体文件地址（如
//at.alicdn.com/t/font_xxx.woff2），那只是资源路径，不是样式表
使用时必须同时写两个 class：
<i class="iconfont icon-user"></i>漏掉
iconfont 就不会应用字体族。
图标不显示？先看 Network 面板里 .woff2 是否 404
绝大多数“图标变方块”问题，本质是字体文件没加载成功。打开开发者工具 → Network → 过滤 woff2：
- 如果请求返回 404：检查 iconfont.css 中
url('iconfont.woff2')的路径是否和实际文件位置一致（注意是相对于 CSS 文件，不是 HTML） - 如果请求被 CORS 阻止：CDN 必须返回
Access-Control-Allow-Origin: *；Cloudflare 或部分国内 CDN 默认不开放字体跨域 - 如果请求成功但图标仍为空：用
getComputedStyle(el).fontFamily检查元素是否真应用了图标字体族
<link> 引入后图标颜色/大小调不了？检查 CSS 优先级和属性支持
字体图标本质是文字，只能响应文字相关 CSS 属性：
- 生效的：
color、font-size、line-height、vertical-align - 无效的：
fill、stroke、width/height（除非设display: inline-block） - 常见覆盖：其他 CSS 规则重置了
font-family或设了font-size: 0，导致图标不可见
调试建议：临时加一句 i { font-family: 'Font Awesome 6 Free' !important; } 看是否恢复，确认是不是样式被覆盖。
真正容易被忽略的是字体文件路径解析逻辑——它永远以 CSS 文件所在位置为基准，而不是 HTML 页面路径。哪怕你把 <link> 放在根目录 HTML 里，只要 CSS 文件在 /css/iconfont.css，里面写的 url('iconfont.woff2') 就会被浏览器请求到 /css/iconfont.woff2。这点错位，90% 的本地引入失败都源于此。
