分享

开发 | 想让小程序变得更漂亮?一招教你使用图标字体

 新华书店好书榜 2017-07-18
文 | 我的代码有点烂
图标字体,相信大家都不陌生。包括 font-awesome,iconic 等等,都是很不错的图标字体服务。
但是,这些服务基本都是在 web 前端使用。而要在微信小程序中使用,需要进行简单的移植。
今天,知晓程序(微信号 zxcx0101)的这篇文章,就来教你如何在小程序中使用图标字体。
工具
由于小程序具有体积限制,我们需要对相应文件进行压缩。这样,才能更方便地将图标字体引入至小程序中。
在此,我们推荐一个在线工具:http:///它可以将不需要的图标从字体中排除,这样,就能有效减少字体文件体积大小。
配置
我们将生成好的图标字体文件下载回来,然后打开这个文件夹,看看它的目录结构是怎样的。
在这里,我们只需要 fontello.ttf 的 Base 64 编码文本,以及 fontello.css 的部分图标字体代码。
转码
转成 Base 64 很简单,只需要一行指令就可以了。
引入
我们首先提取出 .icon- 开头的 CSS 类,因为这些是不需要经过改动的。比如这样:

然后,我们将这些代码添加到一个新的 WXSS 文件,并在新建的 WXSS 文件开头,编写字体的引用:

再来一个字体样式的 CSS 类:

使用
经过上边的处理,小程序就能正常使用这套图标了。我们就在 app.wxss 中导入这个 WXSS,供全局使用吧!

然后,我们就可以愉快地在小程序中,引用字体里面的图标啦!

原文地址:http://www.jianshu.com/p/85317465e662

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多