下面我就為大家分享一篇webpack中使用iconfont字體圖示的方法,具有很好的參考價值,希望對大家有幫助。
入坑webpack,開始載入一些圖片、js檔案什麼的都沒有報錯,今天剛好下了iconfont字體,就出現了錯誤,所以這裡分享一下怎麼在webpack中使用iconfont。
1、修改css中字型檔路徑
#我把css和字型檔放在同級目錄下
開啟iconfont.css文件,原本的字型文件引用路徑是用的css的方式,也就是下面圖片中所示的
同級目錄:直接用檔名
上一級目錄:../
但是,我們是在webpack環境下使用,所以要改成webpack引用規則,也就是改成下面圖片所示
同級目錄: ./
上一層目錄: ../
2.設定如何載入woff等字型文件 大家都知道webpack要設定loader,宣告如何載入某一文件,所以我們要在config中聲明一下在webpack的設定檔的loaders中設定 ######上面是我整理給大家的,希望今後會對大家有幫助。 ######相關文章:#########透過JS中利用FileReader如何實作上傳圖片前本機預覽功能############透過使用vue如何實現添加mp3音訊檔案############透過VUE2.0 Element-UI Echarts如何實現封裝的元件#######
以上是在webpack中如何使用iconfont字體圖標的詳細內容。更多資訊請關注PHP中文網其他相關文章!