直接用<image>+class="iconfont"不行，因为<image>是原生组件，不支持伪元素、子元素嵌套及继承字体设置，内部嵌套内容会被忽略或报错；应改用<view>包裹并配合绝对定位实现图层叠加。
为什么直接用 <image> + class="iconfont" 不行
uni-app 的 <image> 是原生组件，不支持伪元素（::before）、position: absolute 子元素定位，也不继承父级字体设置。所以你写 <image src="..."><text class="iconfont icon-x"></text></image> 会直接报错或被忽略——<image> 内部不允许嵌套任何内容。
用 <view> 包裹实现图层叠加
核心思路是放弃把图标塞进图片里，改用容器 + 定位模拟“叠加”效果：
- 外层
<view class="img-container">设为position: relative -
<image>和<text>（或<view>）并列放在该容器内，都设position: absolute - 通过
z-index控制层级，top/right等控制图标位置
示例：
<view class="img-container"> <image src="/static/avatar.jpg" class="base-img"></image> <text class="iconfont icon-close" style="top: 12rpx; right: 12rpx; z-index: 2;"></text> </view>
对应 CSS：
.img-container {
position: relative;
width: 120rpx;
height: 120rpx;
}
.base-img {
width: 100%;
height: 100%;
}
.iconfont {
position: absolute;
font-size: 36rpx;
color: #fff;
text-shadow: 0 0 4rpx rgba(0,0,0,.5);
}
小程序端图标位置偏移怎么办
微信/支付宝小程序对 position: absolute 的计算基准和 H5 不完全一致，常见现象是图标在真机上右上角没对齐。原因通常是：
-
<image>没设宽高，导致父容器height计算为 0，绝对定位失去参照 - 使用了
rpx但未给父容器明确尺寸（如width/height），某些小程序引擎 fallback 到 px 计算 -
<text>默认有上下 padding，影响实际坐标
解决方法：
- 确保
<image>显式设置width和height（推荐用 rpx，且父容器同值） - 图标用
<view>替代<text>，避免文本基线干扰；或加line-height: 1;和padding: 0; - 调试时临时加
border: 1rpx solid red;查看真实渲染区域
App 端图标显示为空白或方块
这基本不是叠加逻辑问题，而是 iconfont 字体文件未正确加载或引用失效：
- 检查
iconfont.css中所有url()是否已全部改为以/static/开头的绝对路径，例如：url('/static/iconfont/iconfont.woff2') - 确认字体文件（.woff/.woff2）确实放在
static/iconfont/目录下，且构建后存在于unpackage/dist/build/app-plus/static/iconfont/ - App 端安卓部分机型对
.woff2支持不稳定，建议在@font-face中同时声明.woff作为 fallback - 不要在
main.js里import字体 CSS，必须在App.vue的<style>中用@import引入
如果仍无效，可临时加一行测试：<view class="iconfont icon-shouye"></view> —— 若 Unicode 能显示，说明字体加载成功，问题出在类名或项目配置。
叠加本身很简单，真正耗时间的是各端对定位、字体、尺寸的细微差异。别指望一次写完全端一致，真机连调才是关键。
