必须将 iconfont.css 中所有 url() 路径改为以 /static/ 开头的绝对路径，如 url('/static/iconfont/iconfont.woff2?t=123456789')，并分平台适配字体格式（小程序用 .woff/.woff2，App 端保留 .woff fallback），同时确保在 App.vue 的 <style> 中用 @import 引入、使用 <text> 或带 display: inline-block 的 <view> 标签，搭配 iconfont 和具体图标类名（如 icon-shouye）才能正常显示。
直接在 App.vue 的 <style> 中引入 iconfont.css 就能用，但必须改路径、删冗余、分平台处理，否则小程序不显示、H5 报 404、App 端图标乱码。
为什么 iconfont.css 改完路径还是不显示？
uni-app 各端对字体文件路径解析规则不同：H5 认相对路径，小程序只认绝对路径（/static/xxx），App 端还可能因字体加载时机问题导致首次渲染空白。常见错误是直接复制官网生成的 iconfont.css，里面路径写的是 url('iconfont.woff2') —— 这在任何端都找不到。
- 必须把所有
url(...)改成以/static/开头的绝对路径，例如url('/static/iconfont/iconfont.woff2?t=123456789') - 微信小程序不支持
.ttf，只认.woff和.woff2；App 端某些安卓机对.woff2兼容差，建议保留.woff作为 fallback - 如果用了自定义构建（如 vite 模式），
static目录不会被自动拷贝到输出目录，需手动确认构建后/unpackage/dist/build/mp-weixin/static/iconfont/下存在字体文件
怎么在页面里正确写 class 名？
别抄 demo_index.html 里带 icon- 前缀的 class，那是旧版命名。新版 iconfont 项目默认用「Font class」方式，实际类名是 icon-xxx，但具体后缀得看你在 iconfont 项目中给图标起的名字 —— 这个名字在下载前可编辑，不是搜索关键词自动决定的。
- 打开下载包里的
demo_index.html，鼠标悬停图标，看 DOM 上写的 class 是什么，比如icon-shouye、icon-shezhi - 在
<view>或<text>标签里用：<view class="iconfont icon-shouye"></view> -
iconfont是字体族名，必须和iconfont.css里@font-face的font-family一致；icon-shouye是单个图标的 class，两者缺一不可 - 不能用
<icon>标签（非 uni-app 内置组件），也不能只写icon-shouye而漏掉iconfont
main.js 引入 vs App.vue 引入，哪个更稳？
优先在 App.vue 的 <style lang="scss"> 或 <style> 里用 @import，不要在 main.js 里 import './static/iconfont/iconfont.css'。
-
main.js是 JS 执行入口，CSS 引入在这里属于“运行时注入”，uni-app 的多端编译器（尤其是小程序）不一定能识别或提取样式，容易导致图标不生效 -
App.vue的<style>是全局样式作用域，会被 uni-app 构建系统统一收集、内联或外链，各端兼容性更好 - 如果项目用了 scss，
@import '@/static/iconfont/iconfont.css'可以直接写；如果是普通 css，就用@import url('/static/iconfont/iconfont.css'); - 注意路径别写成
../static/...或./static/...，一律用绝对路径/static/...
图标颜色/大小调不了？检查这三点
字体图标本质是文字，但很多开发者卡在“设置了 color 没反应”，根本原因是 CSS 优先级或继承被覆盖，或者用了不支持的标签。
- 必须用支持文本样式的标签：推荐
<text>（小程序/H5 都行），<view>在部分平台需要加display: inline-block才能生效 -
color属性必须直接作用于带iconfont类的元素，不要靠父级继承；若父级有color: #999，子级又没显式重写，图标就会被染色 - 字号用
font-size控制，单位推荐rpx（响应式）；避免用width/height缩放，那会拉伸失真 - 调试技巧：在浏览器开发者工具里检查元素 computed 样式，确认
font-family: "iconfont"是否生效、color是否被覆盖、是否有其他 CSS 重置了font-size
最易忽略的是：iconfont 项目更新后重新下载，你改过的 iconfont.css 被新文件覆盖，路径又变回相对地址；还有就是图标的 class 名在 iconfont 后台悄悄改了，但你代码里还用旧名——这两点几乎占了 70% 的“图标不显示”报错原因。
