大家好,又和大家见面了,今天给大家分享的是小程序如何引入阿里矢量图库,现在想想已近迫不及待拉吧,那么大家跟我来吧!
1、准备:阿里矢量图
/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('///t/font_591310_juq4xai9zqlu9pb9.eot');src: url('///t/font_591310_juq4xai9zqlu9pb9.eot?#iefix') format('embedded-opentype'),url('///t/font_591310_juq4xai9zqlu9pb9.woff') format('woff'),url('///t/font_591310_juq4xai9zqlu9pb9.ttf') format('truetype'),url('///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";//阿里矢量图地址