小程序引入阿里矢量圖

大家好，又和大家見面了，今天給大家分享的是小程序如何引入阿里矢量圖庫，現在想想已近迫不及待拉吧，那麼大家跟我來吧！

1、準備：阿里矢量圖

http://iconfont.cn/help/detail?helptype=draw

2、下載選好的矢量圖

3、查看下載項目並解壓

編輯iconfont.css

@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1521016706343'); /* IE9*/
  src: url('iconfont.eot?t=1521016706343#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAWwAAsAAAAACCAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZW7khGY21hcAAAAYAAAABnAAABnM9Ja0lnbHlmAAAB6AAAAcUAAAHkcboZI2hlYWQAAAOwAAAALwAAADYQvUT6aGhlYQAAA+AAAAAcAAAAJAfeA4VobXR4AAAD/AAAABAAAAAQD+kAAGxvY2EAAAQMAAAACgAAAAoBaAC4bWF4cAAABBgAAAAfAAAAIAETAF1uYW1lAAAEOAAAAUUAAAJtPlT+fXBvc3QAAAWAAAAALgAAAD8zWUq/eJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2Bk/sU4gYGVgYOpk+kMAwNDP4RmfM1gxMjBwMDEwMrMgBUEpLmmMDgwVDyLYm7438AQw9zA0AAUZgTJAQAqsAzIeJzFkMENwCAIRT9iG9N0lB6bJq7isaeO4MSsYQG9OIHfPIEfIgYAGwBWLiUC9IFgetUl9xmH+xGP1klP0FglS2ltykzkHcmzYC/TjmWidaNnnX7fo7J914F+UXLH9iqlA/4BiUARvwB4nB2Pz2vTYBzG3+d9l/RnEvumSdp0bZOmSTa6xNn1h6XYMhkUVwfCTjusw4NHlcFgl8B6EXZQ8SA7FxG9e5ThHyJ6GIon/wWjL3758uXhywPP5yESIX9v2DWrEJ1skDtkjzwiBHIHLZXW4Ya9mHZguJJhlVUWeqGb8VoxuwerJZfN7qAXWHJG1qCigR23OwhjGqLfm9AxumYdqNbsQ+6vc/YG+UrYeJHu03cwmt66NonSB1vTctfRs+dFzqucv8zKkpSldE1T8dQyc1IuL6fvJc02rpubtIliNbQfHilOjT++7D2r+1YOWC6h1xz147Rkl8QmtqnzauaWkq3Yitcu4/xnoaIX68EPImZNdH3LnrMnRCE14pNANO3HCD0VGcMruSV4wxj9iUC3xEt3hRzuNGAZTGVXp/nTK7ag39JfHza4iXh2GzD5Iv1N53fzo32KzythEL7Vn680SKefCr7VjuO25RegrUZzYD5aESoYvrBLtksKpCnyRYIgEGkNSEK4QqmwGhi65mA4CCg5ThhLjhcJpQleeeP76c3u2NvcVvlBhO9bB7qyjSW9ODm5oP/v607AWNCJzmaRAzjR7Iz8A3a4VikAAAB4nGNgZGBgAOLJ7H9mx/PbfGXgZmEAgWvnGZoQ9P8pLAzMqUAuBwMTSBQALVMKOQB4nGNgZGBgbvjfwBDDwgACQJKRARWwAABHCgJtBAAAAAPpAAAEAAAABAAAAAAAAAAAdgC4APIAAHicY2BkYGBgYQhkYGUAASYg5gJCBob/YD4DABESAXEAeJxlj01OwzAQhV/6B6QSqqhgh+QFYgEo/RGrblhUavdddN+mTpsqiSPHrdQDcB6OwAk4AtyAO/BIJ5s2lsffvHljTwDc4Acejt8t95E9XDI7cg0XuBeuU38QbpBfhJto41W4Rf1N2MczpsJtdGF5g9e4YvaEd2EPHXwI13CNT+E69S/hBvlbuIk7/Aq30PHqwj7mXle4jUcv9sdWL5xeqeVBxaHJIpM5v4KZXu+Sha3S6pxrW8QmU4OgX0lTnWlb3VPs10PnIhVZk6oJqzpJjMqt2erQBRvn8lGvF4kehCblWGP+tsYCjnEFhSUOjDFCGGSIyujoO1Vm9K+xQ8Jee1Y9zed0WxTU/3OFAQL0z1xTurLSeTpPgT1fG1J1dCtuy56UNJFezUkSskJe1rZUQuoBNmVXjhF6XNGJPyhnSP8ACVpuyAAAAHicY2BigAAuBuyAhZGJkZmRhZGVgbGCJTczN5GrMj8vPaM0NzMvnYEBAEimBpMAAA==') format('woff'),
  url('iconfont.ttf?t=1521016706343') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('iconfont.svg?t=1521016706343#iconfont') format('svg'); /* iOS 4.1- */
}

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

.icon-mima:before { content: "\e639"; }

.icon-yonghuming:before { content: "\e65a"; }

4、轉換

5、複製轉換代碼 更換

@font-face {
  font-family: 'iconfont';  /* project id 591310 */
  src: url('//at.alicdn.com/t/font_591310_juq4xai9zqlu9pb9.eot');
  src: url('//at.alicdn.com/t/font_591310_juq4xai9zqlu9pb9.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_591310_juq4xai9zqlu9pb9.woff') format('woff'),
  url('//at.alicdn.com/t/font_591310_juq4xai9zqlu9pb9.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_591310_juq4xai9zqlu9pb9.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-mima:before { content: "\e639"; }

.icon-yonghuming:before { content: "\e65a"; }

6、小程序引入

app.wxss裏面引入
@import "pages/template/font.wxss";//阿里矢量圖地址

如有什麼不懂得，大家可以加微信，爲大家解答