微信小程序学习笔记——icon

自带的icon组件是这样的：


<icon type="waiting" size="93" color="yellow"></icon>


type是有限的几种。


如果要使用自定义的话，可以使用图片等等方式，这里记一下使用矢量字体的方法。


首先是大本营：https://www.iconfont.cn/


然后盯住要的字体，加购物车，添加到项目。


在项目里生成代码，此时出现的是css代码，复制到wxss里。


然后再wxss里再定义两个class选择器，一个指定字体，一个指定字（图标）。


如下：

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

.icon-science:before {
  content: "\xxxx";
  color: red;
  font-size: 70px;
}

xxxx为要用的图标的代码（把&#x替换为\，去掉最后的;）。

最后再wxml里的使用方式：

  <icon class="iconfont icon-science"></icon>