微信小程序引用阿里巴巴矢量图标

													**微信小程序引用阿里巴巴矢量图标**
  1. 登录阿里巴巴矢量图标库官网
    https://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.da2e3581b&type=1
  2. 找到需要下载的矢量图标添加到库(本文以“微信扫码”矢量图标为例)
    微信小程序引用阿里巴巴矢量图标_第1张图片
    微信小程序引用阿里巴巴矢量图标_第2张图片
  3. 对加入到库的矢量图标可以选择添加到项目,也可以直接下载
    微信小程序引用阿里巴巴矢量图标_第3张图片
  4. 直接下载会得到一个压缩包,解压并找到iconfont.css文件 微信小程序引用阿里巴巴矢量图标_第4张图片
  5. 打开该文件,文件中含有需要的矢量图标:kefu和shenfenzheng,即库中的矢量图标
    微信小程序引用阿里巴巴矢量图标_第5张图片
  6. 在微信小程序中可以新建一个css样式表来存储自己所需要的矢量图标代码,此处新建lib–>style–>icon.wxss文件,并把iconfont.css文件中的所有内容复制到icon.wxss文件中
    微信小程序引用阿里巴巴矢量图标_第6张图片
  7. 在app.wxss中引入icon.wxss文件
    引入文件
    8.在自己的页面中引用所需要的矢量图标,名字为矢量图标的名字
    通过标签引入矢量图标

你可能感兴趣的:(微信小程序)