图标不显示常见原因：未正确使用Iconfont的CSS链接或类名错误；FontAwesome应优先用v6免费CDN，注意类名变更；资源加载失败需检查网络请求、标签位置及协议；字体图标仅支持color/font-size等文字属性。
用 <link> 引入 Iconfont 为什么图标不显示？
常见原因是没选对项目链接，或没正确引用图标类名。Iconfont 官网生成的「在线链接」分两种：css 链接（含 @font-face 和类名定义）和「js 链接」（动态注入，不推荐用于静态页）。只粘贴了字体文件地址（如 //at.alicdn.com/t/font_xxx.woff2）肯定无效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 登录 Iconfont → 进入「我的项目」→ 点击「生成链接」→ 复制「CSS 链接」（以
https://at.alicdn.com/t/c/font_开头的完整<link>标签） - 确保 HTML 中该
<link>在<body>之前、其他自定义 CSS 之后加载，避免类名被覆盖 - 使用时写
<i class="iconfont icon-xxx"></i>，其中icon-xxx必须和项目中图标「字体类名」完全一致（大小写、连字符都不能错）
FontAwesome 的 <link> 引入方式有哪几种？怎么选？
FontAwesome 6 官方主推 CDN 方式，但版本和协议影响实际可用性。免费版（fontawesome-free）和 Pro 版资源路径、支持图标范围、甚至类名前缀都不同。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用官方最新免费 CDN：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">（注意不是all.css，min版本无调试信息且体积小） - 别用旧版 v4 的
font-awesome.min.css链接，v4 的类名是fa fa-home，v6 是fa-solid fa-house，混用直接不渲染 - 如果项目需离线或定制图标子集，别硬塞 CDN，改用 npm 安装 + 构建时引入，否则字体文件可能跨域失败或被广告拦截器屏蔽
引入后图标变成方块或问号？检查这三处
这不是代码写错了，而是资源加载链路中断。浏览器控制台 Network 标签页里，重点看字体文件（.woff2、.ttf）是否返回 403、404 或 CORS 错误。
常见原因：
-
<link>标签写在<body>里——CSS 必须在<head>中，否则 DOM 渲染时字体尚未就绪 - 用了私有 Iconfont 项目但未登录账号，或项目设为「仅限团队访问」，外链会 403
- 本地开发时用
file://协议打开 HTML——现代浏览器禁止从本地文件加载字体，必须走http://或https://（哪怕本地起个python -m http.server）
图标能用 CSS 控制大小颜色，但有些属性无效？
Font-based 图标本质是文字，所以 color、font-size、vertical-align 有效；但 width、height、background 无效（除非额外加 display: inline-block）。另外，某些图标库默认启用伪元素（如 FontAwesome 的 ::before），若父元素设置了 font-family，可能意外覆盖图标字体。
稳妥写法：
- 统一用
font-size调整大小，别碰width/height - 显式重置字体：给图标元素加
font-family: "Font Awesome 6 Free", "iconfont" !important;（注意引号和空格） - 需要背景色或边框？套一层
<span>，把样式写在外层，图标本身只管内容和颜色
<link> 引入只是最快上手方式，不是最优解。 
