小程序中使用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完成。其中不足还望指出。或有其它更加优雅的做法亦希望能不吝赐教。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容