uni-app怎么引用字体图标 uni-app中使用iconfont详细教程-uni-app-PHP中文网

必须将 iconfont.css 中所有 url() 路径改为以 /static/ 开头的绝对路径，如 url('/static/iconfont/iconfont.woff2?t=123456789')，并分平台适配字体格式（小程序用 .woff/.woff2，app 端保留 .woff fallback），同时确保在 app.vue 的中用 @import 引入、使用或带 display: inline-block 的标签，搭配 iconfont 和具体图标类名（如 icon-shouye）才能正常显示。

uni-app怎么引用字体图标 uni-app中使用iconfont详细教程

直接在 App.vue 的 <style></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 项目中给图标起的名字 —— 这个名字在下载前可编辑，不是搜索关键词自动决定的。

uni-app

uni-app 是基于 Vue 的跨端开发框架，适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载

打开下载包里的 demo_index.html，鼠标悬停图标，看 DOM 上写的 class 是什么，比如 icon-shouye、icon-shezhi
在 <view></view> 或 <text></text> 标签里用：<view class="iconfont icon-shouye"></view>
iconfont 是字体族名，必须和 iconfont.css 里 @font-face 的 font-family 一致；icon-shouye 是单个图标的 class，两者缺一不可
不能用 <icon></icon> 标签（非 uni-app 内置组件），也不能只写 icon-shouye 而漏掉 iconfont

main.js 引入 vs App.vue 引入，哪个更稳？

优先在 App.vue 的 <style lang="scss"></style> 或 <style></style> 里用 @import，不要在 main.js 里 import './static/iconfont/iconfont.css'。

main.js 是 JS 执行入口，CSS 引入在这里属于“运行时注入”，uni-app 的多端编译器（尤其是小程序）不一定能识别或提取样式，容易导致图标不生效
App.vue 的 <style></style> 是全局样式作用域，会被 uni-app 构建系统统一收集、内联或外链，各端兼容性更好
如果项目用了 scss，@import '@/static/iconfont/iconfont.css' 可以直接写；如果是普通 css，就用 @import url('/static/iconfont/iconfont.css');
注意路径别写成 ../static/... 或 ./static/...，一律用绝对路径 /static/...

图标颜色/大小调不了？检查这三点

字体图标本质是文字，但很多开发者卡在“设置了 color 没反应”，根本原因是 CSS 优先级或继承被覆盖，或者用了不支持的标签。

必须用支持文本样式的标签：推荐 <text></text>（小程序/H5 都行），<view></view> 在部分平台需要加 display: inline-block 才能生效
color 属性必须直接作用于带 iconfont 类的元素，不要靠父级继承；若父级有 color: #999，子级又没显式重写，图标就会被染色
字号用 font-size 控制，单位推荐 rpx（响应式）；避免用 width/height 缩放，那会拉伸失真
调试技巧：在浏览器开发者工具里检查元素 computed 样式，确认 font-family: "iconfont" 是否生效、color 是否被覆盖、是否有其他 CSS 重置了 font-size