uniapp关于ttf字体图标使用的问题

uniapp关于ttf字体图标使用的问题

一、使用流程：

　　1、首先要有一个字体图标文件（例如：uni.ttf），文件位置/static/uni.ttf，以及如何增加、编辑字体图标;

　　2、将uni.ttf文件转成Base64（转码后的字符串不能包含回车换行等）

　　3、修改/components/uni-icons/uni-icons.vue文件，将Base64码写入

　　4、编辑/components/uni-icons/icons.js

　　5、页面引用

二、下面将每个流程详细说明一下

　　1、首先要有一个字体图标文件（例如：uni.ttf），文件位置/static/uni.ttf，以及如何增加、编辑字体图标;

　　利用百度字体平台编辑（http://fontstore.baidu.com/static/editor/index.html），可以增加、编辑字体图标

　　增加字体图标：

　　　　1、字体平台首页（http://fontstore.baidu.com/store#!/）找到想要的图标，选中图标后，点击该图标右上角“+”，加入到购物车，点击购物车导出字体文件

　　　　2、字体平台编辑（http://fontstore.baidu.com/static/editor/index.html），打开要编辑的图标文件（uni.ttf）,导入刚生成的字体文件

　　　　3、编辑字体图标：选中要编辑的字体图标，点【设置代码点】修改改字体的代码点；点【字形信息】修改代码点及名称

　　　　4、修改完成后，点【保存项目】，点【ttf导出】

　　2、在线转Base64（https://www.motobit.com/util/base64-decoder-encoder.asp）

　　　　请自行百度

　　3、修改/components/uni-icons/uni-icons.vue文件，将Base64码写入

　　　　

　　4、编辑/components/uni-icons/icons.js，按下图格式写入新增字体图标

　　　　

　　5、页面引用（红色部分名称要和icons.js里的名称对应，名称可以修改，只要对应就可以）

　　　　

废了半天的功夫，终于搞明白了，整理一下便于以后查阅，希望能给大家带来帮助