• 媒体品牌
    爱范儿
    关注明日产品的数字潮牌
    APPSO
    先进工具,先知先行,AIGC 的灵感指南
    董车会
    造车新时代,明日出行家
    玩物志
    探索城市新生活方式,做你的明日生活指南
  • 知晓云
  • 制糖工厂
    扫描小程序码,了解更多

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

小程序

2017-07-18 18:00

文 | 我的代码有点烂

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

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

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

工具

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

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

配置

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

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

转码

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

引入

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

.icon-heart:before { content: '\e800'; } /* '' */
.icon-heart-empty:before { content: '\e801'; } /* '' */
.icon-star:before { content: '\e802'; } /* '' */
.icon-star-empty:before { content: '\e803'; } /* '' */

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

@font-face {
  font-family: 'FontAwesome';
  src: url(data:font/truetype;charset=utf-8;base64, 上边转码后的 base64) format('truetype');
  font-weight: normal;
  font-style: normal;
}

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

.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

使用

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

// app.wxss
@import "./libs/font-icon.wxss";

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

<view class="fa icon-star" />

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

关注「知晓程序」公众号,在微信后台回复Flex」,学习在小程序中进行排版的正确姿势

zxcx_0208

登录,参与讨论前请先登录

评论在审核通过后将对所有人可见

正在加载中

小程序商店 minapp.com,一扫即用的小程序大全。微信公众号「知晓程序」,做中国最好的小程序报道。

本篇来自栏目

解锁订阅模式,获得更多专属优质内容