微信小程序-组件和样式（4）字体图标之阿里巴巴矢量图标库的使用

一.阿里巴巴矢量图表库的使用

阿里巴巴矢量图表库的网址：阿里巴巴矢量图标库

在搜索框输入我们需要的图标文本，比如首页/配送/时间等，就会搜索到各种文本图标：

选中文本图标，点击购物车，选择项目：

可以编辑首页项目，比如icon class的名称：


点击生成在线链接，点击.css链接查看生成的CSS代码

@font-face {
  font-family: "iconfont"; /* Project id 4569824 */
  src: url( **已删除url**
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-lx:before {
  content: "\e66d";
}

.icon-time:before {
  content: "\e680";
}

.icon-ps:before {
  content: "\e600";
}

.icon-hp:before {
  content: "\e6c6";
}

二.在微信小程序中使用阿里巴巴矢量图标库

2.1 创建矢量图标库文件夹和文件

2.2 在首页通过代码引用矢量.scss文件的样式

注意：在引用之前需要在全局app.scss文件里引用矢量.scss文件，使用@import关键字

@import "./iconfont/iconfont.scss";

在.wxml里面引用选择器class的样式

<view class="info">
  <text><text class="iconfont icon-ps"></text>同城配送</text>
  <text><text class="iconfont icon-lx"></text>行业龙头</text>
  <text><text class="iconfont icon-time"></text>半小时送达</text>
  <text><text class="iconfont icon-hp"> </text>100% 好评</text>
</view>

三.常见错误及解决办法

官网解释，这种错误不影响小程序运行，除了难看外

解决办法：
点击项目设置，选择base64选项

重新生成css文件：

重新复制到.scss文件，错误会消失。