uni-app中阿里iconfont需统一用base64内联字体避免跨域及加载失败，H5与小程序共用一份iconfont.css，通过条件编译最小干预适配多端，必须使用类名方式且确保Font Class前缀一致。
uni-app 项目里用阿里 iconfont，核心不是“怎么引入”，而是“怎么避免跨域、字体加载失败、H5 和小程序图标不一致”这三个实际卡点。直接上手配对就行，别被“教程”二字带偏。
下载 iconfont 文件后，为什么 H5 能显示、小程序却空白？
uni-app 小程序端不支持 @font-face 加载远程字体（如 iconfont.cn 的 //at.alicdn.com/t/font_xxx.woff），也不支持本地 .woff 直接引用——必须转成 base64 内联或使用小程序原生支持的格式。
- 把下载的
iconfont.woff用在线工具（如 base64encode.org）转成 base64 字符串 - 在
static/fonts/iconfont.css中替换src: url('iconfont.woff')为src: url('data:font/woff;charset=utf-8;base64,...'); - 确保该 CSS 文件通过
<style></style>标签或@import在App.vue或页面中加载（不能只放static下就不管） - H5 端可保留远程地址，但建议统一用 base64，省去条件编译
uni-app 条件编译下，如何让 iconfont 同时兼容 H5、微信小程序、App？
别写三套 CSS，用 uni-app 提供的条件编译语法做最小干预即可。重点是字体路径和 class 命名保持一致，渲染逻辑不拆分。
- 在
static/fonts/iconfont.css里统一定义.iconfont和.icon-xxx类，所有平台共用 - 字体文件只放一份 base64 版本，避免 H5 引远程、小程序引本地导致样式错乱
- 如果非要区分（比如 App 端想用系统图标 fallback），用
#ifdef APP-PLUS包裹额外样式，但非常规需求不建议 - 注意：微信小程序不支持
unicode方式（），必须用类名方式（<i class="iconfont icon-search"></i>）
为什么写了 class="iconfont icon-search" 却显示方块或空心矩形？
这不是代码写错了，大概率是字体未加载完成就渲染，或 class 名与 iconfont 项目导出的不匹配。
- 检查 iconfont 项目中“Font Class”前缀是否被修改过（默认是
icon-），导出的 CSS 里.icon-search是否真实存在 - 确认
iconfont.css已在App.vue <style></style>中@import './static/fonts/iconfont.css';（H5/App 有效）；小程序需额外在pages.json的style字段或页面级<style scoped></style>中 import - 真机调试时，微信开发者工具可能缓存旧 CSS，删掉
unpackage目录 + 清除工具缓存再重新运行 - Vue 3 的
uni-app（如使用vue-cli创建）要注意scoped样式会加属性选择器，导致.iconfont规则失效，此时去掉scoped或用::v-deep(.iconfont)
最常被忽略的是：iconfont 项目设置里「Font Class 前缀」和「Unicode 前缀」一旦改过，就必须同步更新所有引用处和导出的 CSS 文件——没人会专门去翻那个小齿轮图标里的配置，但出问题八成在这儿。
