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

一、前言

在微信小程序开发过程中，有时候需要用到其他的一些小图标。本文主要阐述“在微信小程序中添加阿里巴巴矢量图标”，仅供参考哦。希望能够帮到你~

二、实现过程

2.1、下载自己需要的图标

步骤1. 

打开阿里巴巴图标库 ：https://www.iconfont.cn/    如下图：

 

步骤2. 

1）搜索选择你需要的图标添加到购物车中

2）点击购物车，点击“下载代码”。如下图所示：

 

3）下载完成后解压。解压后打开文件夹，你会看到如下图所示内容:

 

2.2、微信小程序中添加后缀.wxss文件

步骤1. 

1）找到后缀为.css的文件。在下载的文件中找到iconfont.css文件。

2）小程序中添加一个.wxss文件。有2种实现方式，方法如下：

a.直接把该文件后缀改成.wxss，放到小程序项目文件中 ;

b.在小程序中新建一个.wxss的文件，把css文件中的代码全部复制到新建的.wxss文件中。

当然最终你都会看到类似下图所示内容：

 

3）文件引用。在app.wxss中引入该文件。如下图所示：

2.3、.wxml中的调用

 

详细说明：

 

三、拓展

---