uni-app 阿里图标库引用图标不显示

uni-app 阿里图标库引用图标不显示

项目信息 详情
产品分类 uniapp/App
PC开发环境 Windows
PC开发环境版本 win 10
HBuilderX类型 正式
HBuilderX版本 3.1.14
手机系统 iOS
手机系统版本 IOS 14
手机厂商 苹果
手机机型 iphone8
页面类型 vue
打包方式 云端
项目创建方式 HBuilderX

操作步骤:

1

预期结果:

1

实际结果:

1

bug描述:

阿里图标库最近更新了 下载到本地之后引用图标不显示

image


更多关于uni-app 阿里图标库引用图标不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 阿里图标库引用图标不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html


阿里图标库近期更新后,图标不显示的问题通常与图标引用方式或字体文件路径有关。以下是常见解决方案:

  1. 检查字体文件路径
    确保 iconfont.css 中的 url() 路径正确指向字体文件(如 .woff2.ttf)。若文件位于 static 目录,使用绝对路径:

    [@font-face](/user/font-face) {
      src: url('/static/font/iconfont.woff2') format('woff2');
    }
    
  2. 更新图标引用方式
    阿里图标库新版可能调整了字体编码。在 CSS 中确认图标类名对应的 Unicode 编码,例如:

    .icon-xxx:before {
      content: "\e001"; /* 与项目下载的 CSS 文件保持一致 */
    }
回到顶部