首頁 > web前端 > js教程 > 主體

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

亚连
發布: 2018-06-05 15:50:01
原創
2366 人瀏覽過

下面我就為大家分享一篇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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!