uni-app中使用iconfont需将font-family全小写、字体文件放static并用绝对路径引用、图标元素必须显式声明font-family，小程序端建议base64内联且避免font-display。
uni-app 里用 iconfont 必须改 font-family 名字
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 正常、小程序白屏
uni-app 中 class 引用 iconfont 图标要加 font-family 声明
很多开发者直接照搬网页写法：<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二者配合，缺一不可
小程序平台（微信/支付宝）用 iconfont 需额外处理 base64 或本地化
微信小程序不支持从 CSS 中加载远程字体文件（url('https://...')），也不支持 static 下的相对路径写法（如 url('../static/iconfont.woff')），只认绝对路径或 base64 内联。
性能与兼容性影响：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;，避免图标闪动或加载失败
uni-app 使用 iconfont 后图标乱码或重叠的典型原因
不是字体没加载，而是 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 是否匹配，别图省事复用旧文件。
