在webpack中如何使用iconfont字體圖標

下面我就為大家分享一篇webpack中使用iconfont字體圖示的方法，具有很好的參考價值，希望對大家有幫助。

入坑webpack，開始載入一些圖片、js檔案什麼的都沒有報錯，今天剛好下了iconfont字體，就出現了錯誤，所以這裡分享一下怎麼在webpack中使用iconfont。

1、修改css中字型檔路徑

#我把css和字型檔放在同級目錄下

開啟iconfont.css文件，原本的字型文件引用路徑是用的css的方式，也就是下面圖片中所示的

同級目錄：直接用檔名

上一級目錄：../

但是，我們是在webpack環境下使用，所以要改成webpack引用規則，也就是改成下面圖片所示

同級目錄： ./

上一層目錄： ../

2.設定如何載入woff等字型文件

大家都知道webpack要設定loader，宣告如何載入某一文件，所以我們要在config中聲明一下

使用之前要安裝url-loader、file-loader

在webpack的設定檔的loaders中設定

字型檔案最後會以字元的形式儲存在css檔案中

######上面是我整理給大家的，希望今後會對大家有幫助。 ######相關文章：#########透過JS中利用FileReader如何實作上傳圖片前本機預覽功能############透過使用vue如何實現添加mp3音訊檔案############透過VUE2.0 Element-UI Echarts如何實現封裝的元件#######

以上是在webpack中如何使用iconfont字體圖標的詳細內容。更多資訊請關注PHP中文網其他相關文章！