在小程序中,有默认的图标icon组件,但你会发现它的图标样式很少,可能很多时候并不能满足我们的需求,这时候我们就需要引入外部的一些图标。
下面,就让我们一起去研究一下怎么引入Iconfont阿里巴巴图标。
Iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具。
首先需要小伙伴自行在微信开发工具中创建一个项目,需要注册一个iconfont账号,后面要用到,保存图标到到购物车,并添加至项目。
随便找几个图标加入购物车,点击右上角购物车会出现如下图:
然后点击添加至项目添加至项目(如果没有项目,可自行创建一个,我这儿创建了一个probject),然后点击上方图标管理并找到我的项目就能看到刚刚的图标了,点击查看在线链接并生成代码,就能看到下图:
打开小程序删除多余文件,样式等,Unicode获取:
@font-face {
font-family: 'iconfont';
src: url('//at.alicdn.com/t/font_1858720_5spl0qiknij.eot');
src: url('//at.alicdn.com/t/font_1858720_5spl0qiknij.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_1858720_5spl0qiknij.woff2') format('woff2'),
url('//at.alicdn.com/t/font_1858720_5spl0qiknij.woff') format('woff'),
url('//at.alicdn.com/t/font_1858720_5spl0qiknij.ttf') format('truetype'),
url('//at.alicdn.com/t/font_1858720_5spl0qiknij.svg#iconfont') format('svg');
}
.iconfont{
font-family:"iconfont";
color: red;
font-size: 40rpx;
}
.icon-success::before{
content: '\e6a1';
}
.icon-search::before{
content: '\e6a2';
}
.icon-news::before{
content: '\e6a3';
}
<view>
<icon class="iconfont icon-success"></icon>
<icon class="iconfont icon-search"></icon>
<icon class="iconfont icon-news"></icon>
</view>
效果如下:
Unicode获取方式
如下图点击复制代码会出现 
需要去掉一些没用的符号写成:'\e6a1' 放到css中就可以了,例如:
.icon-xxxx::before{
content: ‘\e6a1’;
}
资源均来自第三方,谨慎下载,前往第三方网站下载