uni-app項目給uni-icons增加擴充自己所需要的字體圖標(編輯ttf文件)

實現步驟
1.下載uni-icons的ttf字體圖標文件(原生項目創建後是沒有的,需要去官方模板實例中找,直接複製也可以)
我們需要編輯ttf文件,所以需要先下載這個文件。
https://blog.csdn.net/kouryoushine/article/details/102393171


2. 準備新的字體圖標文件(iconfont)

闡述下步驟吧,怕新手不會(在其中搜索圖標,然後添加入購物車,確定後添加入項目就可以了,沒有項目就自己建一個)


在這款編輯器中進行添加刪除圖標
http://fontstore.baidu.com/static/editor/index.html#

3. 用百度字體平臺合併兩個ttf文件
導入uni-icons的ttf文件後,看到所有uni-app的圖標庫已經被保存。

導入從iconfont下載的ttf文件。導入後可以看到新的圖標和編碼。


3. 導入字體

4.點擊導出ttf就會生成新的字體文件

5.將ttf轉換爲base64

在線轉碼,按照默認來就行
https://www.motobit.com/util/base64-decoder-encoder.asp

6.用word(或者其他工具)將回車符去掉,否則會讀取失敗

6.引入新的字體文件


ttf轉換爲base64文件並去掉回車符後,把uni-icons.vue中的font-face替換掉

替換後相當於現在uni-app項目中的字體文件包含了新的圖標。我們只需引入圖標的索引位置即可
在uni-icons.vue中添加新的圖標的名稱和索引編號。
注:名稱是自定義的uni-icon-xxxx ,索引編號在百度字體圖標上選擇“預覽”可以看到。

方法借鑑與:https://blog.csdn.net/kouryoushine/article/details/102396601

但是按照他的方法折騰了一晚上也不管用,突然靈光乍現,去掉了回車符,然後就對了……

作爲官方圖標的補充,這個版本比較豐富

https://ext.dcloud.net.cn/plugin?id=846

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章