直接在app.vue的中@import修改后的iconfont.css即可使用，否则易白屏或显示方块；问题集中于字体名（须全小写无空格）、路径（必须/static/开头绝对路径）和标签（必须用并显式声明font-family）。
直接在 App.vue 的 <style></style> 里 @import 修改后的 iconfont.css 就能用，但不改就大概率白屏或显示方块——问题几乎全出在字体名、路径、标签三处，跟代码逻辑无关。
font-family 必须全小写且无空格
uni-app 编译器（尤其是 HBuilderX 或 vue-cli）会把 @font-face 中的 font-family 值强制转成小写。而 iconfont 官网生成的 CSS 默认可能带大小写混用、首尾空格甚至不可见字符，导致匹配失败。
- 打开下载的
iconfont.css，全局搜索font-family:，把所有引号内的值手动改成纯小写，例如"IconFont"→"iconfont" - 用编辑器开启“显示空白字符”功能，确认引号内没有首尾空格或制表符
- 别信 demo_index.html 里写的 font-family 名，以你修改后的 CSS 为准；改完后必须重新保存文件
字体文件路径必须是 /static/ 开头的绝对路径
H5 能认相对路径，小程序只认 /static/xxx，App 端构建路径还可能变化。直接复制官网生成的 url('iconfont.woff') 在任何端都会 404。
- 把
.woff、.woff2、.ttf全部放进static/fonts/目录（不是assets/） - 在
iconfont.css里把所有url(...)替换为绝对路径，例如url('/static/fonts/iconfont.woff2?t=123456789') - 微信小程序不支持
.ttf，只认.woff和.woff2；App 端某些安卓机对.woff2兼容差，建议保留.woff作为 fallback
必须用 <text></text> 标签 + 显式声明 font-family
<view></view> 和 <text></text> 默认不继承父级 font-family，只靠 class="iconfont icon-home" 不生效——content 属性没载体，图标自然不显示。
- 推荐写法：
<text class="iconfont icon-home"></text>，并在样式中为.iconfont加上font-family: 'iconfont' !important; - 如果非要用
<view></view>，必须内联写style="font-family: 'iconfont'"，class 里声明无效 - 图标类名（如
icon-home）要和iconfont.css里.icon-home:before的定义一致，这个名称是在 iconfont 项目里编辑确定的，不是搜索关键词自动产生的
小程序端建议用 base64 内联字体
微信/支付宝小程序对字体加载更敏感：不支持远程地址，对本地路径解析也更严格，真机调试时容易因缓存或时机问题白屏。
- 用在线工具（如 base64encode.org）把
iconfont.woff转成 base64 字符串 - 替换
iconfont.css中的src:行，例如src: url('data:font/woff;charset=utf-8;base64,xxxxxx'); - base64 方式可绕过路径问题，H5/App/小程序三端统一，但会增大 CSS 体积；若项目图标少，这是最稳的选择
最容易被忽略的是：真机调试时微信开发者工具会缓存旧 CSS，删掉 unpackage 目录 + 清除工具缓存再重运行，否则改了十遍也没用。
