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

文 | 我的代码有点烂

图标字体,相信大家都不陌生。包括 font-awesome,iconic 等等,都是很不错的图标字体服务。

但是,这些服务基本都是在 web 前端使用。而要在微信小程序中使用,需要进行简单的移植。

今天,知晓程序(微信号 zxcx0101)的这篇文章,就来教你如何在小程序中使用图标字体。

工具

由于小程序具有体积限制,我们需要对相应文件进行压缩。这样,才能更方便地将图标字体引入至小程序中。

在此,我们推荐一个在线工具:http://fontello.com/。 它可以将不需要的图标从字体中排除,这样,就能有效减少字体文件体积大小。

配置

我们将生成好的图标字体文件下载回来,然后打开这个文件夹,看看它的目录结构是怎样的。

在这里,我们只需要 fontello.ttf 的 Base 64 编码文本,以及 fontello.css 的部分图标字体代码。

转码

转成 Base 64 很简单,只需要一行指令就可以了。

引入

我们首先提取出 .icon- 开头的 CSS 类,因为这些是不需要经过改动的。比如这样:

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

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

使用

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

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

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

原文发布于微信公众号 - 知晓程序(zxcx0101)

原文发表时间:2017-07-18

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏挖坑填坑

Angular4记账webApp练手项目之二(在angular4项目中使用Angular WeUI)

安装后还需要引用weui 样式以及我们的font-awesome图标苦,在我们项目index.html中引用

1392
来自专栏Android干货

安卓开发_时间、日期选择器的简单使用

3127
来自专栏柠檬先生

vue2.0 组件通信

组件通信:     子组件要想拿到父组件数据 props     子组件不允许直接给父级的数据, 赋值操作如果想更改,父组件每次穿一个对象给子组件,     对...

22310
来自专栏九彩拼盘的叨叨叨

浏览器默认样式

浏览器都拥有一套自己的默认样式。 浏览器之所以有默认样式表,是为了没有样式表的页面也能凑活着看。 不同浏览器;以及版本不同的浏览器的默认样式一般都是不同的。

772
来自专栏Crossin的编程教室

在 Python 程序中显示进度条

转自 http://my.oschina.net/jhao104/blog/681507 1、利用标准输出 先说一下文本系统的控制符: \r: 将光标移...

3257
来自专栏Android干货

小程序实践(三):九宫格实现及item跳转

1773
来自专栏地方网络工作室的专栏

打造前端 Deepin Linux 工作环境——系统更新以及配置字体

打造前端 Deepin Linux 工作环境——系统更新以及配置字体 安装好编辑器,然后就准备码代码了,但是感觉字体不是很好看。所以决定配置一下字体。顺便把系统...

4266
来自专栏极乐技术社区

微信小程序开发详解《四》页面生命周期和参数传递

1:页面的生命周期 在初始页面:index.js中增加如图所示代码 ? 点击“编译”后,运行这个小程序:日志如下图所示:初始页面index.js启动会从app,...

2038
来自专栏python3

tkinter -- Scrollbar

Scrollbar(滚动条),可以单独使用,但最多的还是与其它控件(Listbox,Text,Canva 等)结合使用

712
来自专栏IT开发技术与工作效率

Excel Post下载网址获取方法

1882

扫码关注云+社区

领取腾讯云代金券