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

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

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方式引用等,
小程序--微信小程序使用阿里巴巴矢量库图标