微信小程序> 小程序引入阿里矢量图

小程序引入阿里矢量图

浏览量:2682 时间: 来源:小河流水人家z

大家好,又和大家见面了,今天给大家分享的是小程序如何引入阿里矢量图库,现在想想已近迫不及待拉吧,那么大家跟我来吧!

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";//阿里矢量图地址

如有什么不懂得,大家可以加微信,为大家解答

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎