uni-app自定义字体图标 uni-app如何引入iconfont-uni-app-PHP中文网

uni-app中使用iconfont需将font-family全小写、字体文件放static并用绝对路径引用、图标元素必须显式声明font-family，小程序端建议base64内联且避免font-display。

uni-app自定义字体图标 uni-app如何引入iconfont

uni-app 默认会把 @font-face 中的 font-family 名称自动转成小写，而 iconfont 官网生成的 CSS 里通常带大写字母（比如 "iconfont" 或 "myIcon"），结果字体加载后图标不显示——不是路径错了，是名字对不上。

实操建议：

下载 iconfont 的 iconfont.css 后，手动把所有 font-family: "xxx" 改成全小写，例如 font-family: "iconfont" → font-family: "iconfont"（看着一样？注意引号内是否真没空格/大小写混用）
在 App.vue 或全局样式文件（如 common/icon.scss）中引入修改后的 CSS，**不要**用 @import 加载线上地址，uni-app 的 H5 和小程序平台对跨域或相对路径处理不一致
字体文件（iconfont.woff 等）必须放在 static 目录下，CSS 里的 url('./iconfont.woff') 要改成 url('/static/iconfont.woff')，否则 H5 正常、小程序白屏

很多开发者直接照搬网页写法：<view class="iconfont icon-home"></view>，但 uni-app 的默认组件（比如 view、text）没有继承父级字体设置，图标类名生效的前提是当前元素明确声明了 font-family。

常见错误现象：图标显示成方块、问号或空白；控制台无报错，字体文件也加载成功。

实操建议：

用 text 标签包裹图标（推荐）：<text class="iconfont icon-home"></text>，并在样式中为 .iconfont 设置 font-family: 'iconfont' !important;
如果非要用 view，必须显式加 style="font-family: 'iconfont'"，不能只靠 class 继承
icon-home 这类类名本身不包含 Unicode 值，它只是定义了 content: "\e601"，所以最终渲染依赖 font-family + content 二者配合，缺一不可

微信小程序不支持从 CSS 中加载远程字体文件（url('https://...')），也不支持 static 下的相对路径写法（如 url('../static/iconfont.woff')），只认绝对路径或 base64 内联。

速创猫AI简历

速创猫AI简历是一款用于生成、优化和定制求职简历的 AI 简历工具。

下载

性能与兼容性影响：base64 会增大 CSS 体积，但能确保各端一致；用本地文件则需确认构建后是否被正确复制到 dist 目录。

实操建议：

把 iconfont.woff 文件转成 base64 字符串（可用在线工具或 base64 -i iconfont.woff），替换 CSS 中的 url(...) 为 url('data:font/woff;charset=utf-8;base64,...')
确认 vue.config.js 中未误配 copyWebpackPlugin 排除了 .woff 类型（uni-app CLI 项目才需检查）
支付宝小程序对 font-display 属性敏感，建议删掉 CSS 中的 font-display: swap;，避免图标闪动或加载失败

不是字体没加载，而是 Unicode 编码冲突或 CSS 优先级覆盖。比如你同时引入了两套 iconfont（一套来自 iconfont.cn，一套来自团队私有库），它们用了相同的 font-family 名但字符映射不同，最后渲染的总是后加载的那一套。

容易踩的坑：

多个 iconfont CSS 文件共用同一个 font-family 名，比如都叫 "iconfont"，导致图标错位甚至显示成其他图标
自定义图标时复制了旧项目的 iconfont.css，但没同步更新字体文件，Unicode 值对应不上实际字形
在 scoped 样式中写 .icon-home::before，但父容器设置了 font-size: 0 或 line-height: 0，导致图标不可见

复杂点在于：这个问题在 H5 看不出，在微信小程序里突然大面积乱码，而且查不到报错。最稳妥的做法是每次更新 iconfont，都重新下载并校验 CSS 与字体文件的 md5 是否匹配，别图省事复用旧文件。