小程序–微信小程序使用阿里巴巴矢量库图标

2020年4月20日

阿里巴巴矢量库

1.导图

1.1下载图标项目

小程序--微信小程序使用阿里巴巴矢量库图标
注:项目默认引用名是iconfont,我这里改成了font,所以我引用的第一个class是写的font
小程序--微信小程序使用阿里巴巴矢量库图标

1.2解压后文件(多个)放到自己的项目中

这是我存放的位置,文件夹名称不必须,可自定义,
小程序--微信小程序使用阿里巴巴矢量库图标

1.3新建iconfont.wxss文件

因为app.wxss中直接引用css文件会报错,所以使用wxss文件引用
iconfont.wxss文件内容完全复制iconfont.css文件内容即可,
小程序--微信小程序使用阿里巴巴矢量库图标

1.4app.wxss引用

路径根据自己的写
小程序--微信小程序使用阿里巴巴矢量库图标

2.1页面使用

因为是在app.wxss中引用,所以其他页面可直接使用,如:
小程序--微信小程序使用阿里巴巴矢量库图标

2.2如何查看class对应的图标,

下载项目后有demo_index.html文件,
小程序--微信小程序使用阿里巴巴矢量库图标
通过浏览器打开,即可查看使用Unicode码引用、Font class方式引用等,
小程序--微信小程序使用阿里巴巴矢量库图标

相关文章:

  • 2022-02-07
  • 2021-10-05
  • 2021-05-28
  • 2021-05-27
  • 2022-02-07
  • 2022-02-07
  • 2021-06-18
  • 2022-01-07
猜你喜欢
  • 2022-12-23
  • 2021-08-24
  • 2021-09-13
  • 2021-12-28
  • 2021-12-31
  • 2022-01-16
  • 2021-11-26
相关资源
相似解决方案