webpack中使用iconfont字體圖標(biāo)的方法
更新時間：2018年02月22日 10:31:43 作者：TowYingWang
下面小編就為大家分享一篇webpack中使用iconfont字體圖標(biāo)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
入坑webpack，開始加載一些圖片、js文件什么的都沒有報錯，今天正好下了iconfont字體，就出現(xiàn)了錯誤，所以這里分享一下怎么在webpack中使用iconfont。
1、修改css中字體文件路徑
我把css和字體文件放在同級目錄下
打開iconfont.css文件，原本的字體文件引用路徑是用的css的方式，即下面圖片中所示的
同級目錄：直接用文件名
上一級目錄：../
但是，我們是在webpack環(huán)境下使用，所以要改成webpack引用規(guī)則，即改成下面圖片所示
同級目錄： ./
上一級目錄： ../
2、配置如何加載woff等字體文件
大家都知道webpack要配置loader，聲明如何加載某類文件，所以我們要在config中聲明一下
使用之前要安裝url-loader、file-loader
在webpack的配置文件的loaders中配置
字體文件最后會以字符的形式保存在css文件中
以上這篇webpack中使用iconfont字體圖標(biāo)的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細介紹了js實現(xiàn)點擊按鈕隨機生成背景顏色，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
工作小知識積累，獲取圖片的大小，需要的朋友可以參考下。2011-09-09
最近公司需求做一個微信紅包雨功能,這里給大家總結(jié)下實現(xiàn)的方法,這篇文章主要給大家介紹了關(guān)于uni-app微信小程序之紅包雨活動的相關(guān)資料,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了使用pkg打包ThinkJS項目的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12![js中promise如何取到[[PromiseResult]]問題](http://img.jbzj.com/images/xgimg/bcimg4.png)
js中promise如何取到[[PromiseResult]]問題
這篇文章主要介紹了js中promise如何取到[[PromiseResult]]問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
下面小編就為大家?guī)硪黄猨s 模仿錨點定位的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
javascript dom追加內(nèi)容實現(xiàn)示例
javascript dom追加內(nèi)容的使用還是比較廣泛的，在本文將為大家介紹下具體的使用方法，感興趣的朋友可以參考下2013-09-09
關(guān)于HTTP傳輸中g(shù)zip壓縮的秘密探索分析
Gzip是一種流行的文件壓縮算法，現(xiàn)在的應(yīng)用十分廣泛，尤其是在Linux平臺。下面這篇文章主要給大家介紹了關(guān)于HTTP傳輸中g(shù)zip壓縮的相關(guān)資料，文中介紹的非常詳細，需要的朋友可以參考借鑒，下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
Javascript 阻止瀏覽器默認操作的實現(xiàn)代碼
在瀏覽器事件中，會觸發(fā)一些默認動作，比如：點擊一個鏈接時，執(zhí)行完捕獲／冒泡動作后，會觸發(fā)鏈接的默認事件：跳轉(zhuǎn)到指定鏈接地址。2009-09-09
這篇文章主要介紹了css+js制作不定高度展開收起動畫詳解的相關(guān)資料,需要的朋友可以參考下2023-06-06