问题：AliFont图标不显示如何排查？

Question

在使用阿里云图标库 AliFont 时，常遇到图标无法正常显示的问题。排查此类问题，首先应检查图标库是否正确引入，确保 HTML 中引用的 script 或 link 标签无误。其次，确认图标类名是否书写正确，如 `iconfont` 和具体图标类名是否遗漏或拼写错误。此外，检查网络请求是否成功加载字体文件，可通过浏览器开发者工具查看 Network 面板是否存在 404 或跨域问题。还需注意字体文件的跨域配置（CORS），若部署在不同域名下，需服务器配置允许跨域访问。最后，排查 CSS 是否被其他样式覆盖或字体路径配置错误，导致图标不可见。通过逐步检查引入方式、网络请求、样式规则，可有效定位并解决 AliFont 图标不显示的问题。

Answer 1

一、AliFont 图标库引入方式的排查

在使用阿里云图标库 AliFont 时，图标无法正常显示是前端开发中常见的问题。首先应检查图标库是否正确引入，确保 HTML 文件中引用的 <link> 或 <script> 标签无误。

• 检查是否遗漏引入图标库的 CDN 链接。
• 确认引入链接是否为阿里云官方提供的最新地址。
• 若使用本地字体文件，需确保路径配置正确。

二、图标类名书写是否正确

图标类名书写错误是导致图标不显示的常见原因。AliFont 图标通常使用两个类名组合使用，如：

<i class="iconfont icon-example"></i>

其中：

• iconfont 是基础类名，必须存在。
• icon-example 是具体图标类名，需与阿里云图标库中定义的一致。

三、字体文件加载与网络请求分析

使用浏览器开发者工具（F12）进入 Network 面板，查看字体文件是否成功加载。常见字体文件格式包括：

文件类型	扩展名	说明
EOT	.eot	适用于旧版IE浏览器
WOFF2	.woff2	现代浏览器推荐格式
TTF	.ttf	通用字体格式

若字体文件请求失败，可能出现 404 错误或跨域问题（CORS）。

四、跨域问题（CORS）配置

若字体文件部署在不同域名下，服务器必须配置允许跨域访问。例如，在 Nginx 中添加如下配置：

location ~ \.(woff|woff2|eot|ttf|otf)$ {
    add_header Access-Control-Allow-Origin "*";
}
  

若未正确配置，浏览器控制台将报错：No 'Access-Control-Allow-Origin' header present。

五、CSS样式覆盖与路径问题

即使图标类名和字体文件均正确，CSS 样式也可能导致图标不显示。以下是常见排查点：

• 检查是否被其他 CSS 框架（如 Bootstrap）覆盖了 iconfont 的样式。
• 确认字体路径是否正确，特别是在使用本地字体时。
• 查看字体是否被设置为隐藏（如 display: none 或 visibility: hidden）。

六、完整的排查流程图

graph TD
      A[检查图标库引入] --> B[检查类名是否正确]
      B --> C[查看字体文件网络请求]
      C --> D{字体文件是否加载成功?}
      D -- 是 --> E[检查CORS配置]
      D -- 否 --> F[修正字体路径或引入方式]
      E --> G{是否存在CORS错误?}
      G -- 是 --> H[配置服务器允许跨域]
      G -- 否 --> I[检查CSS是否覆盖]
      I --> J{是否被覆盖?}
      J -- 是 --> K[调整CSS优先级]
      J -- 否 --> L[图标应正常显示]