小程序引入阿里图标

阿里巴巴矢量图标库https://www.iconfont.cn/
1、阿里图标库搜索想要的图标，添加至购物车（可添加多个）

图1.jpg

2、点击购物车，将购物车内的图标添加至项目中。选择添加至的项目名称，如无项目，新建项目并确定。

图2-1.jpg 图2-2.jpg

3、选择Unicode，点击 “点此复制代码”

图3-1.jpg 图3-2.jpg

4、在小程序app.wxss中粘贴复制代码，并设置对应的图标Unicode(16进制) 如：.icon-test:before { content: "\e600"; }；可在图标项目中编辑该图标查看对应的16进制码/上图3-2中图标下方显示的后四位为图标的16进制码。

图4-1.jpg 图4-2.jpg

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

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

5、在应用页面wxml文件中添加<text class='iconfont icon-test' ></text>；这样图标就被添加进去了。如改变图标颜色可加style属性。

<view class="layout">
  <text class='iconfont icon-test'></text>
  <text class='iconfont icon-test' style='color:red'></text>
  <text class='iconfont icon-test' style='color:orange'></text>
</view>

图5.jpg

6、在该项中添加新的图标，按上述步骤选择加入购物车添加至已有的项目，并更新代码。点击复制替换小程序代码。并设置对应的图标。

图6-1.jpg 图6-2.jpg

<view class="layout">
  <text class='iconfont icon-test'></text>
  <text class='iconfont icon-test' style='color:red'></text>
  <text class='iconfont icon-test' style='color:orange'></text>
</view>
<view class="layout">
  <text class='iconfont icon-update'></text>
  <text class='iconfont icon-update' style='color:red'></text>
  <text class='iconfont icon-update' style='color:orange'></text>
</view>

6-3.jpg

注：如果在app.wxss中设置对应图标时设置图标颜色、大小等，则在页面修改style属性不作用。