欢迎使用CSDN-markdown编辑器

微信小程序iconfont的使用

在微信小程序中有一套自己的图标库“icon”，在做一些简单的需求时，我们可以直接进行使用 。在这里就不做介绍了，可以直接查看官方文档微信小程序官方文档
上面的文档中只给出了很少的一部分，无法满足我们对程序要求的更快更好，在这里我介绍一种新的方式进行引用，从而优化小程序的性能，
首先我们根据UI设计图，从淘宝的iconfont上查找的我们需要的图标，iconfont的网络地址iconfont网址，如果上边没有我们所需求的图标时，可以让UI给我们设计为svg格式进行转换。
首先：我们在小程序的wxml文件中使用一下代码，<text class="iconfont choose-icon1"></text>
之后：现在iconfont上搜索到你所需要的图标样式，按照如下步骤进行操作：
1.加入购物车。
添加到项目点击查看链接，将上边的代码拷贝到wxss文件中，@font-face {
font-family: 'iconfont'; /* project id 309191 */
src: url('//at.alicdn.com/t/font_5z3kqlbwyhf47vi.eot');
src: url('//at.alicdn.com/t/font_5z3kqlbwyhf47vi.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_5z3kqlbwyhf47vi.woff') format('woff'),
url('//at.alicdn.com/t/font_5z3kqlbwyhf47vi.ttf') format('truetype'),
url('//at.alicdn.com/t/font_5z3kqlbwyhf47vi.svg#iconfont') format('svg');
}
之后点击下载至本地将代码下载下来，拷贝出里边iconfont.css中的代码，

.iconfont {  font-family:"iconfont" !important;  font-size:38rpx;  font-style:normal;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  color: #E4E4E4;  margin: 0 18rpx;}.choose-icon1:before { content: "\e601"; }

之后就可以在页面中使用了。