微信小程序之iconfont矢量图标引用

前言

日常前端页面的开发中偶尔会使用到矢量图标,常用以iconfont矢量图标库为主,因其使用快捷且方便

但在小程序对文件格式中确发现不能直接引用,需要一些额外的步骤,本文就此作简要说明

(iconfont的基本使用官网有示例,此处不作过多说明)

IconFont官网地址

www.iconfont.cn/


小程序对文件的格式有所限制,从iconfont下载过来的字体包无法直接引用,需要对其中的 ttf 文件进行转换


在线转换地址:transfonter.org/


点击 'Add fonts'上传 ttf 文件,选择Base64 encode 并勾选TTF格式,点击Convert即开始转换


转换完成后,点击Download下载到本地并解压


完成解压后,将解压内容中stylesheet.css的文件内容复制到小程序app.wxss中,如:


复制iconfont字体包中iconfont.css的文件内容(第二栏起)到小程序app.wxss中,如:


按需引用

<span class="iconfont iconfont-xxxx"></span>

使用结果示例


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容