如何在CSS中正确引入并使用Iconfont矢量图标库？-css教程-PHP中文网

图标不显示90%因iconfont.css未加载或class名错误；需检查network中woff2是否404、改用绝对路径、避免外链引入、核对class名与css定义一致、处理多字体冲突、设置vertical-align:middle、兼容ie需.eot/.ttf、慎用font-display。

如何在css中正确引入并使用iconfont矢量图标库？

图标不显示，90% 是因为 iconfont.css 没加载成功，或 class 名写错——不是代码写得不对，是路径、命名、加载顺序这些细节卡住了。

打开浏览器开发者工具 → Network 标签页 → 筛选 woff2 或 woff → 搜索 iconfont。如果看到 404 或状态为空，说明字体没找到。

相对路径极易出错：比如 iconfont.css 在 /css/ 目录，但里面写的是 url('./fonts/iconfont.woff2')，而实际字体在 /static/fonts/，就会断链
优先改用绝对路径：url('/static/fonts/iconfont.woff2')
用 Webpack/Vite 等构建工具时，别直接 <link rel="stylesheet"> 引外链 CSS；改用 @import 或 JS import，否则 public 路径映射容易混乱
若从 https://at.alicdn.com 直接 link，企业内网可能拦截该域名，建议下载到本地

iconfont 的类名必须严格匹配 CSS 中的 :before 规则，大小写、连字符、前缀一个都不能错。

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

正确写法是：<i class="iconfont icon-home"></i> ——iconfont 是基础字体类，icon-home 是具体图标类，两个缺一不可
不要复制在线预览页的 HTML 示例，它可能用的是 symbol 模式（靠 <use></use>），和你 link 的 font 模式不兼容
进 iconfont 项目页 → “Font Class” → 下载 ZIP → 解压后打开 iconfont.css，查你要用的图标对应的真实类名，比如 .icon-user:before { content: "\e60a"; }，那就必须写 icon-user
旧项目迁移时容易沿用过期 class 名（如 icon-user-filled 已被删，但 HTML 还留着），要重新核对

页面已有其他 iconfont 字体（比如同时用了 Element Plus 和自定义图标），@font-face 加载顺序会影响最终生效的字体。

多个 @font-face 声明中，后加载的会覆盖同名 font-family；把你的 iconfont.css 放在其他 UI 库 CSS 之后引入
图标默认按文字基线对齐，常比周围文字高半截：给图标加统一样式 i[class^="icon-"] { vertical-align: middle; }
避免写 font-size: 0 来“清除间隙”——图标靠 :before 的 content 渲染，font-size: 0 会让它直接消失
IE11 必须保留 .eot 和 .ttf 格式；只传 woff2 的话，IE 会静默失败，控制台也不报错

font-display: swap 是默认行为，但会导致图标首次加载时先空白再闪现，体验差；而某些内网环境还会因跨域策略拦掉 CDN 字体。

在 @font-face 块里显式加 font-display: optional，可减少 FOIT（Flash of Invisible Text）
CDN 地址如 https://at.alicdn.com/t/c/font_*.css 若被拦截，Network 面板里看不到请求，也无报错，只能靠排除法确认
字体图标只响应 color、font-size、vertical-align 等文字相关属性，不能用 background 或 filter 控制颜色（除非用 CSS 变量 + currentColor）