假設你看中了一個網頁中的某個字體圖標,想要挪為己用,關鍵在於獲取svg文件,之后你可以將圖標導入到自己在https://www.iconfont.cn/的項目中,下載后得到全新的字體圖標文件包,替換掉現有的,就可以在自己的項目中使用了
1. 該圖標是通過字體文件引入
step1: devtool中,找到@font-face 定義的 url,
- 發現直接引入了字體文件路徑,直接進行step3
- 發現引入的是一個base64路徑
data:application/x-font-ttf;charset=utf-8;data:;base64,AAEAAAALAIAAAwAwT1MvMu/2HToAAAC8AAAAYGNtYXAKy/W8AAABHAAAAwBnYXNwAAAAEAAABBwAAAAIZ2x5ZtcfmKIAAAQkAAAxDGhlYWQUZx/7AAA1MAAAADZoaGVhCx8H+QAANWgAAAAkaG10eNuFEHIAADWMAAAA4GxvY2E1RSkCAAA2bAAAAHJtYXhwAFIBiwAANuAAAAAgbmFtZS4CLokAADcAAAABnnBvc3QAAwAAAAA4oAAAACAAAwQRAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEADg4AAAAAQAAAAAAAAAAABAAAD//wPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAAGAAAAAwAAADQAAAAEAAABTAABAAMAAAA0AAEABAAAAUwAAwABAAAANAADAAoAAAFMAAQBGAAAAEIAQAAFAAIAAQAgACsALQA/AEkATQBVAGYhkyHwIsYj8yW2JgYmDyY6JsQm3yb0...
復制代碼
step2: 將base64 轉碼為ttf文件
進入下方頁面https://www.motobit.com/util/base64-decoder-encoder.asp 將上方base64路徑粘貼進去

data:application/x-font-ttf;charset=utf-8;data:;base64,
,包括base64后面的逗號 點擊convert 后 得到 一個二進制文件base64.bin,將其后綴改為ttf。
step3: 讀取ttf,並導出你想要的圖標
將base64.ttf文件導入到 fontstore.baidu.com/static/edit… 選中想要的圖標,導出為svg或png

2. 該圖標是一個svg 標簽

點擊copy element


嘗試直接將該文件上傳到iconfont項目中,結果失敗了,iconfont可能不支持代碼,需要在導入到fontEditor中再導出使用

