在仿站過程中,網站的iconfont查找非常浪費時間,這里教大家一次性獲取網站iconfont的方法
1.打開 開發者工具 在element中搜索font-face,結果如下,<style>標簽內會有@font-face,復制font-face內的所有代碼
2.將代碼粘貼到自己的編輯器上
創建iconfont.css文件,把內容粘貼到文件中,這就是我們的css文件了.
3.下載svg,woff,ttf,eot文件
看到上圖中的https://xxx.eot/.woff/.ttf了嗎,這是iconfont的下載地址,在網頁上輸入即可下載到.woff,ttf,eot格式的iconfont文件.這些iconfont文件就是網站所有iconfont圖標集合
對於svg,由於svg網頁上顯示,不是自動下載,我們可以手動復制svg上的內容,粘貼到自己創建的svg文件上面(我是把iconfont官網上下載的svg內容清空,把仿站的svg內容粘貼上去)
4.修改iconfont.css代碼
這幾個都下載完成,並且在一個文件夾內,我們就可以修改iconfont.css文件中的https路徑了,去掉http網址部分,改路徑為我們本地
5.可以測試iconfont了,根據仿站的iconfont使用,比如下圖,我們在自己的代碼中這么寫,發現可以正確顯示iconfont圖標了
