小程序中使用iconFont

小程序中使用iconFont

前言：纯属个人经验，仁者见仁智者见智。如有不正，请指出必当虚心聆听。话不多说，上过程。

1, 首先在阿里巴巴矢量图标库中选择自己需要到的素材，下载至本地。如下图示：

图标下载

2, 下载后的文件格式如下，选择其中的iconfont.css

选择iconfont.css

3, 将选中的css复制至你的小程序项目中，并按照小程序的文本格式将其更名为iconfont.wxss。新建style文件夹存放一些共用的样式之类。见下图：

在小程序中的icon font文件

4, 回到阿里巴巴矢量图标库刚刚下载图标的项目中选择unicode并查看在线代码如下所示：

生成unicode代码

5,复制生成的在线代码替换iconfont.wxss中的顶部区域如下所示：

替换文件中的@font-face

6,至此你已经可以在你的项目中使用iconfont了，当然在使用之前需要先进行引用全局引用放在app.wxss中，某个页面就放在对应的wxss文件下。不过一般都是进行全局引用如下：

app.wxss中引入

7, 项目中使用

项目中应用

至此，小程序中使用iconfont完成。其中不足还望指出。或有其它更加优雅的做法亦希望能不吝赐教。