uni-app中iconfont彩色图标失效，因小程序禁用自定义字体且image不支持SVG；唯一可靠方案是转为PNG雪碧图或内联Symbol SVG并手动注入symbol。
uni-app 里直接用 iconfont 官网下载的彩色图标会失效
iconfont 官网导出的彩色图标（SVG 或多色字体）默认依赖 CSS 的 color 或 fill 控制颜色，但 uni-app 的 <text> 组件不支持 SVG 渲染，<view> 也无法直接内联 SVG 字体；更关键的是，uni-app 编译到小程序时，自定义字体（@font-face）在 iOS 微信小程序中被禁用，Android 和 H5 虽支持但需额外配置，导致「彩色字体图标」在多数平台显示为方块或空白。
用 iconfont 多色图标唯一靠谱的方式：转成雪碧图或单个 PNG/SVG 图片引入
放弃「字体方式」，改走图片路径是最稳定、跨端一致的方案。uni-app 对图片资源天然友好，且可配合 v-for + require 动态加载。
- 从 iconfont 项目页下载「Symbol」格式 SVG（不是字体文件），用工具批量转成 PNG（推荐用
svg2pngCLI 或 Figma 导出） - 把 PNG 按语义命名（如
icon-home-active.png、icon-search-gray.png），放进static/icons/目录 - 在组件中用
<image>引入：<image :src="require('@/static/icons/icon-home-active.png')" class="icon" /> - 若需动态切换颜色，提前准备多套配色 PNG，通过变量控制
src路径，别试图用 CSS 滤镜或filter在小程序里调色——iOS 微信不支持filter作用于<image>
想用 SVG 矢量图标？得手动内联 SVG 内容，不能靠 <image src="xxx.svg">
uni-app 的 <image> 组件对 SVG 支持极差：H5 下部分浏览器能加载，小程序里基本不渲染。真正可行的是把 SVG 内容作为字符串写进模板，或封装成自定义组件。
- 复制 iconfont 的 Symbol SVG 源码（带
<symbol id="xxx">的那段），粘贴进一个新文件components/icon-svg.vue - 组件内部用
<svg><use :xlink:href="`#${name}`"></use></svg>，并在<template>中预先注入所有 symbol（或用v-html注入完整 SVG 内容） - 注意：微信小程序不支持
xlink:href，必须用（uni-app 2.9+ 已自动转换，但低版本需手动替换）</li> <li>性能提示：大量 SVG 内联会增大首屏体积，建议按页面或功能模块异步引入 SVG 字符串</li> </ul> <H3>为什么不要碰 iconfont 的「彩色字体」CSS 方案</H3> <p>哪怕你看到 H5 上能显示，也别用。因为：</p> <ul> <li>微信小程序（尤其是 iOS）完全不加载 <code>@font-face
声明的 TTF/WOFF，控制台报Failed to load font，图标变方块 - App 平台（iOS）同样限制自定义字体加载策略，部分机型白屏
- 即使某端跑通，
color只能控制单色，所谓「彩色字体」实际是多个 glyph 叠加，uni-app 的<text>不支持 glyph-level color 指令 - 调试时你会发现
font-family: 'iconfont'在getComputedStyle里返回空字符串，说明字体根本没生效
复杂点在于：不同端的字体加载行为差异极大，而 uni-app 的条件编译又无法精细到「某个 CSS 规则是否注入」，一旦引入就全端污染。不如从一开始就不走这条路。
