微信小程序引入iconfont矢量图

1、首先在阿里巴巴矢量图库里创建项目并添加图标进去

2、在微信小程序中新建.wxss文件(如:iconfont.wxss)

@font-face {
  font-family: "iconfont";  /* project id 534266 */
  src: url("//at.alicdn.com/t/font_534266_fu7g2hnf57ncow29.eot");
  src: url("//at.alicdn.com/t/font_534266_fu7g2hnf57ncow29.eot?#iefix") format("embedded-opentype"),
  url("//at.alicdn.com/t/font_534266_fu7g2hnf57ncow29.woff") format("woff"),
  url("//at.alicdn.com/t/font_534266_fu7g2hnf57ncow29.ttf") format("truetype"),
  url("//at.alicdn.com/t/font_534266_fu7g2hnf57ncow29.svg#iconfont") format("svg");
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-tongxunlu:before { content: "e623"}
.icon-sousuo:before{content: "e63b"}
.icon-delete:before {content: "e617"}
.icon-edit:before {content: "e648"}

3、在app.wxss中导入该文件

@import "./utils/iconfont.wxss";

app.wxss 作为全局样式，会作用于当前小程序的所有页面

4、在页面中使用

<view class="iconfont icon-delete"></view>

5、为什么不用@import "https://at.alicdn.com/t/font_534266_fu7g2hnf57ncow29.css"方式导入

由于微信小程序当前这个版本使用@import语句可以导入外联样式表，但是@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。不可以用绝对路径。

在这里我们可以用此方法导入是因为src属性可以写绝对路径，比如我们在<image>标签中的src也是可以用绝对路径的