icon font UI 设计 字体图标 小程序开发 微信小程序
- -
文 | 我的代码有点烂
图标字体，相信大家都不陌生。包括 font-awesome，iconic 等等，都是很不错的图标字体服务。
但是，这些服务基本都是在 web 前端使用。而要在微信小程序中使用，需要进行简单的移植。
今天，知晓程序（微信号 zxcx0101）的这篇文章，就来教你如何在小程序中使用图标字体。
由于小程序具有体积限制，我们需要对相应文件进行压缩。这样，才能更方便地将图标字体引入至小程序中。
在此，我们推荐一个在线工具：http://fontello.com/ 。它可以将不需要的图标从字体中排除，这样，就能有效减少字体文件体积大小。
配置
我们将生成好的图标字体文件下载回来，然后打开这个文件夹，看看它的目录结构是怎样的。
在这里，我们只需要 的 Base 64 编码文本，以及 的部分图标字体代码。
转码
转成 Base 64 很简单，只需要一行指令就可以了。
引入
我们首先提取出 开头的 CSS 类，因为这些是不需要经过改动的。比如这样：
然后，我们将这些代码添加到一个新的 WXSS 文件，并在新建的 WXSS 文件开头，编写字体的引用：
再来一个字体样式的 CSS 类：
使用
经过上边的处理，小程序就能正常使用这套图标了。我们就在 中导入这个 WXSS，供全局使用吧！
然后，我们就可以愉快地在小程序中，引用字体里面的图标啦！
原文地址：http://www.jianshu.com/p/e662
关注「知晓程序」公众号，在微信后台回复「Flex」，学习在小程序中进行排版的正确姿势。
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/bcyy/33287.html