uni-app vue2 将 iconfont 彩色字体图标封装成组件 在h5端不能正常显示

uni-app vue2 将 iconfont 彩色字体图标封装成组件 在h5端不能正常显示

示例代码：

<i :class="iconfont icon-${frontColorIcon}"/>

操作步骤：

  1. 下载 使用 iconfont 阿里的彩色字体图标 ttf.
  2. 在 app.vue 中引入字体图标样式 引入方式 /static/icon/iconfont.css
  3. 将 <i class="iconfont" :class="[icon-${icon}]"> 封装成一个组件
  4. 在页面引入这个组件

预期结果：

h5端显示出彩色图标 app显示出彩色图标

实际结果：

h5端不能显示出图标 app能显示出彩色图标

bug描述：

iconfont彩色图标 组件化后 组件无法在 h5端正常显示 但是 直接使用 标签的方式没任何问题，app端组件化后也没任何问题。

信息类别 详细信息
产品分类 uniapp/H5
PC开发环境 Windows
PC操作系统版本 win11
HBuilderX类型 正式
HBuilderX版本 3.8.12
浏览器平台 Chrome
浏览器版本 chrome最新版
项目创建方式 HBuilderX

Image Image Image


更多关于uni-app vue2 将 iconfont 彩色字体图标封装成组件 在h5端不能正常显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app vue2 将 iconfont 彩色字体图标封装成组件 在h5端不能正常显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题主要是H5端对iconfont彩色图标组件化后的兼容性问题。以下是解决方案：

  1. 检查H5端的字体文件路径是否正确，建议使用绝对路径引入：
@font-face {
  font-family: 'iconfont';
  src: url('~@/static/icon/iconfont.ttf') format('truetype');
}
  1. 组件封装时确保正确传递class：
<template>
  <i class="iconfont" :class="`icon-${icon}`"></i>
</template>
  1. 检查H5端的CSS是否被正确加载，可以在浏览器开发者工具中查看：
  • 网络请求是否成功加载字体文件
  • 元素是否应用了正确的字体样式
  1. 对于彩色图标，确保使用的是iconfont的symbol引用方式，而非传统的font-class方式：
<template>
  <svg class="icon" aria-hidden="true">
    <use :xlink:href="`#icon-${icon}`"></use>
  </svg>
</template>
回到顶部