微信小程序不支持远程加载iconfont CSS，必须将字体文件转为base64嵌入本地iconfont.wxss；需用fontmin-cli处理woff/woff2并确保MIME类型正确；WXSS中class与Unicode编码严格对应，且仅text组件支持:before伪元素。
微信小程序不支持直接加载远程 iconfont CSS
微信小程序的 web-view 外，所有样式都运行在封闭的渲染层，@import 或 @font-face 指向 HTTP/HTTPS 链接（如 https://at.alicdn.com/t/font_abc123.css）会直接被拦截或失效。这不是配置问题，是平台策略限制。
必须把字体文件（.woff/.woff2）转成 base64，再写进本地 iconfont.wxss 中，才能被小程序识别和渲染。
用 fontmin-cli 提取并转 base64（推荐）
别手动下载、转换、拼接——容易漏格式、错 MIME 类型、丢字符映射。用命令行工具更稳：
- 全局安装：
npm install -g fontmin-cli - 准备原始 iconfont 下载包（含
iconfont.woff、iconfont.css） - 执行：
fontmin --iconfont --base64 iconfont.woff，它会自动输出带 base64 的@font-face声明 - 复制输出内容，粘贴到项目根目录下的
iconfont.wxss（注意后缀是.wxss，不是.css）
生成的 @font-face 里 src 字段类似这样：url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAA...')，确保开头是 data:application/x-font-woff（.woff2 则用 font/woff2），否则 iOS 真机可能不渲染。
WXSS 中 class 写法与 Unicode 编码必须严格对应
从 iconfont 网站「下载至本地」后，打开 iconfont.css，里面类似：
.icon-home:before { content: "\e600"; }
这个 \e600 是 Unicode 编码，不能改成十进制或 HTML 实体。WXSS 不支持 content: "" 这种写法。
你需要：
- 把
.icon-home这类 class 全部复制进iconfont.wxss - 确保这些 class 和前面
@font-face使用的是同一个font-family名（比如iconfont） - 在 WXML 中使用时，必须写成：
:before
真机调试时图标不显示？重点查这三处
开发工具里看着正常，但 iPhone/Android 真机白屏，大概率卡在这几个点：
-
@font-face的font-family名在iconfont.wxss和 class 定义中不一致（比如一个写iconfont，另一个写my-icon） - base64 字符串换行了（复制时带了回车或空格），导致解析失败 —— 把整段
url('...')粘贴到一行 - WXML 中用了
:before伪元素，必须换
base64 字体本身体积不小，单个 woff 转完常超 50KB，如果图标多，建议在 iconfont 网站「在线生成」时只勾选实际用到的图标，减少最终 WXSS 文件大小。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
