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

一、前言

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

二、实现过程

2.1、下载自己需要的图标

步骤1. 

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

微信小程序之阿里巴巴矢量图标_第1张图片

 

步骤2. 

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

2)点击购物车,点击“下载代码”。如下图所示:

微信小程序之阿里巴巴矢量图标_第2张图片

 

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

微信小程序之阿里巴巴矢量图标_第3张图片

 

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

步骤1. 

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

2)小程序中添加一个.wxss文件。有2种实现方式,方法如下:

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

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

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

微信小程序之阿里巴巴矢量图标_第4张图片

 

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

微信小程序之阿里巴巴矢量图标_第5张图片

2.3、.wxml中的调用

 

     
     

详细说明:

1561015113(1).jpg

 

三、拓展

微信小程序之阿里巴巴矢量图标_第6张图片


微信小程序之阿里巴巴矢量图标_第7张图片

你可能感兴趣的:(微信小程序常见问题,微信小程序问题,微信小程序,微信小程序之矢量图标)