小程序使用阿里巴巴矢量图标库_阿里矢量图标库怎么在小程序上使用

一、登录官网

www.iconfont.cn

二、在搜索框中搜索想要的图标，将鼠标移动到图标上会看到三个标记

• 可以使用下载，直接使用：

• 可以使用css文件使用：
  •  首先点击购物车样式的选项，而后点击下图位置：

• 点击自己创建的项目，如果没有要创建

 

三、下载（复制）样式文件

点击下面：

• 复制网页中的代码，并在小程序中 创建全局样式文件app.wxss或者app.scss
• 然后再项目中使用text标签，通过class属性指定。

<view class="info">
<text><text class="iconfont icon-tongchengpeisong"></text>同城配送</text>
<text><text class="iconfont icon-src_http___pic30photophotocn_20140223_0022006080"></text>行业龙头</text>
<text><text class="iconfont icon-shijian"></text>半小时送达</text>
<text> <text class="iconfont icon-haoping"></text>100%好评</text>
</view>

• 那么类名怎么指定，来自咱从网站创建的app.wxss(app.scss)文件中的类名，下面展示部分：

.icon-tongchengpeisong:before {
  content: "\e61b";
}

四、注意点

因为阿里巴巴默认没有使用base64编码，所以导致微信小程序报错，为了去掉报错，可以修改项目设置，从新生成新的css代码：