在微信小程序中引入 Iconfont 阿里巴巴图标

前言

如果文章中有出现纰漏、错误之处，还请看到的小伙伴多多指教，先行谢过

在小程序中，有默认的图标icon组件，但你会发现它的图标样式很少，可能很多时候并不能满足我们的需求，这时候我们就需要引入外部的一些图标

下面，就让我们一起去研究一下怎么引入Iconfont阿里巴巴图标

以下↓

Iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具

准备工作

1.首先需要小伙伴自行在微信开发工具中创建一个项目
2.需要注册一个iconfont账号，后面要用到

保存图标到到购物车,并添加至项目

随便找几个图标加入购物车
点击右上角购物车会出现如下图：

然后点击添加至项目添加至项目（如果没有项目,可自行创建一个,我这儿创建了一个probject）
然后点击上方图标管理并找到我的项目就能看到刚刚的图标了
点击查看在线链接并生成代码,就能看到下图

引入到图标小程序中

打开小程序删除多余文件,样式等
Unicode获取

 /*index.css 复制上面的查看链接代码*/
 @font-face {
  font-family: 'iconfont';  /* project id 1858720 */
  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"; /*需要与@font-face的font-family一样*/
   color: red;
   font-size: 40rpx;
}
.icon-success::before{
  content: '\e6a1'; /*Unicode获取方式请看下文*/
}
.icon-search::before{
  content: '\e6a2';
}
.icon-news::before{
  content: '\e6a3';
}

 /*index.wxml*/
<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’;
}

友情链接:

iconfont
小程序文档