假設你看中了一個網頁中的某個字體圖標,想要挪爲己用,關鍵在於獲取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
進入一個代碼IDE,例如,我打開的是vscode,新建一個文件,粘貼代碼,保存文件名爲.svg 後綴 然後將文件導入到http://fontstore.baidu.com/static/editor/,就可以啦
嘗試直接將該文件上傳到iconfont項目中,結果失敗了,iconfont可能不支持代碼,需要在導入到fontEditor中再導出使用