uni-app中图标不显示的主因是font-family大小写不匹配，需统一改为全小写；字体文件须放static目录并用绝对路径；图标元素必须显式声明font-family；小程序推荐base64内联。
font-family 必须全小写，否则图标不显示
uni-app 会把 @font-face 中的 font-family 值强制转为小写，而 iconfont 官网生成的 CSS 默认带大写字母（比如 "IconFont" 或 "myIcon"），结果匹配失败——字体文件明明加载了，图标却显示为方块或空白。
实操建议：
- 打开下载的
iconfont.css，搜索所有font-family: "xxx"，手动改成全小写，例如font-family: "iconfont"（注意引号内不能有空格、不可混用大小写） - 别信 demo_index.html 里写的类名，它可能用的是旧命名；实际类名以你项目设置的「Font Class 前缀」为准，比如设成
custom-icon-，那图标 class 就是custom-icon-home - 如果用了自定义 font-family 名（如
"my-icons"），全局样式和每个图标元素的font-family声明必须完全一致，一个字母都不能错
字体文件必须放 static 目录，CSS 路径要改绝对路径
H5 认相对路径，小程序只认以 /static/ 开头的绝对路径，App 端还可能因构建未复制文件导致白屏。直接照搬官网 CSS 里的 url('./iconfont.woff') 在任何端都会 404。
实操建议：
- 把
iconfont.woff、iconfont.woff2等文件统一放进static/iconfont/目录 - 修改
iconfont.css中所有url()，写成url('/static/iconfont/iconfont.woff?t=123456789')（加时间戳防缓存） - 微信小程序不支持
.ttf，只认.woff和.woff2；安卓 App 对.woff2兼容差，建议保留.woff作为 fallback - 用 vite 构建时，确认
unpackage/dist/build/mp-weixin/static/iconfont/下真有字体文件，否则得配copy插件
图标元素必须显式声明 font-family
uni-app 的 <view></view> 和 <text></text> 不继承父级字体设置，只靠 class 名（如 iconfont icon-home）无法触发字体渲染。常见错误是写了 class 却没设字体族，控制台无报错，图标就是不出现。
实操建议：
- 优先用
<text></text>标签包裹图标：<text class="iconfont icon-home"></text>，并在样式中加.iconfont { font-family: 'iconfont' !important; } - 如果非要用
<view></view>，必须写内联 style：<view class="icon-home" style="font-family: 'iconfont'"></view> -
icon-home这类 class 本身不含 Unicode，它只定义content: "\e601"，最终显示依赖font-family+content二者同时生效
小程序端推荐 base64 内联，避免路径问题
微信/支付宝小程序不支持从 CSS 加载远程字体，也不认 ../static/ 这种相对路径，只接受绝对路径或 base64。但本地文件方式一旦构建出错就难排查，base64 虽增大 CSS 体积，却能一劳永逸。
实操建议：
- 用命令行或在线工具把
iconfont.woff转成 base64 字符串：base64 -i iconfont.woff | tr -d '\n' - 替换
iconfont.css中的url('/static/iconfont/iconfont.woff')为url('data:font/woff;charset=utf-8;base64,d09GMgABAAAA...') - 删掉其他格式（
.ttf、.eot）的src行，只留 base64 的 woff，减少冗余 - 别在
main.js里import字体 CSS，统一在App.vue的<style></style>里用@import引入，确保各端注入时机一致
