zoukankan      html  css  js  c++  java
  • 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里的名称对应,名称可以修改,只要对应就可以)

        

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

  • 相关阅读:
    帮忙看看怎么优化这个最长的sql
    12种不宜使用的Javascript语法
    走格子
    乘法逆元
    完美字符串
    全排列问题
    A. Sorting Railway Cars
    Prim
    矩阵取数
    套题T8&T9
  • 原文地址:https://www.cnblogs.com/wishit/p/13959081.html
Copyright © 2011-2022 走看看