用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

微信小程序开发 --定制字体图标

Rolan 2017-6-7 00:26

前言字体图标,相信大家都不陌生,什么font-awesome,iconic等等,但是这些基本都是在web前端使用,而要在微信小程序中使用,需要进行简单的移植。工具发现一个不错的在线字体生成工具,可以选择需要的字体图标,这 ...

前言

字体图标,相信大家都不陌生,什么font-awesomeiconic等等,但是这些基本都是在web前端使用,而要在微信小程序中使用,需要进行简单的移植。

工具

发现一个不错的在线字体生成工具,可以选择需要的字体图标,这样能减少体积的大小:http://fontello.com/

配置

下载回生成的图标之后,查看目录结构如下:

目录结构

我们只需要fontello.ttfbase64编码文本和fontello.css的部分字体图标代码

转码

转成base64很简单,不多说:

ttf2base64

提取

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

.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;
}

再来一个字体样式class:

.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";

然后就可以愉快地在wxml中引用啦!

<view class="fa icon-star" />
作者:我的代码有点烂
原文:http://www.jianshu.com/p/85317465e662
鲜花
鲜花 (1)
鸡蛋
鸡蛋

刚表态过的朋友 (1 人)

分享至 : QQ空间
收藏
原作者: 我的代码有点烂

相关阅读