图标无法显示最常见原因是iconfont CSS文件未加载成功；需检查Network中CSS请求状态、link标签路径与属性是否正确、类名拼写是否一致，以及是否存在样式覆盖或安全策略拦截。

图标无法显示，最常见原因是 iconfont 的 CSS 文件没加载成功。先确认这个关键环节是否到位。

检查 iconfont CSS 是否真的引入了

打开浏览器开发者工具（F12），切换到「Network」标签页，刷新页面，然后在筛选框中输入 iconfont 或 .css，看有没有对应 CSS 文件的请求记录。如果完全没出现，说明 HTML 中根本没写引入语句；如果状态码是 404，说明路径写错了；如果是 403 或 500，可能是服务器权限或配置问题。

核对 link 标签写法和路径是否正确

确保 HTML 的 <head> 里有类似这样的代码：

<link rel="stylesheet" href="//at.alicdn.com/t/font_XXXXXX.css">

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

立即学习“前端免费学习笔记（深入）”；

注意几点：

• href 值必须是完整可访问的 URL，不能是相对路径（如 ./iconfont.css）且当前目录下又没放该文件
• 不要漏掉 rel="stylesheet"，否则浏览器不会当样式表处理
• 如果用了本地字体文件，确认 .css 文件和对应的 .woff / .ttf 等字体文件都在同一目录，或 CSS 里的 url() 路径能正确指向字体

检查字体类名是否拼写一致

CSS 里定义的类名（比如 .icon-home）和 HTML 中写的必须完全一致，包括大小写、连字符、前缀。常见错误：

• 复制代码时多了一个空格或中文标点
• 项目用了自定义前缀（如 .myicon-home），但 HTML 还写成 .icon-home
• 字体文件更新后，CSS 里的 Unicode 编码变了，但旧的 class 没同步更新

排除其他干扰因素

即使 CSS 引入成功，也可能被覆盖或阻断：

• 用开发者工具选中图标元素，看「Computed」面板里 font-family 是否包含 iconfont；如果没有，说明样式被其他规则覆盖了
• 检查是否有 CSS 规则设置了 display: none、visibility: hidden 或 font-size: 0
• 某些安全策略（如 Content Security Policy）会阻止外链字体加载，查看 Console 是否有相关报错