webpack中使用iconfont字體圖標(biāo)的方法
入坑webpack,開始加載一些圖片、js文件什么的都沒(méi)有報(bào)錯(cuò),今天正好下了iconfont字體,就出現(xiàn)了錯(cuò)誤,所以這里分享一下怎么在webpack中使用iconfont。
1、修改css中字體文件路徑
我把css和字體文件放在同級(jí)目錄下
打開iconfont.css文件,原本的字體文件引用路徑是用的css的方式,即下面圖片中所示的
同級(jí)目錄:直接用文件名
上一級(jí)目錄:../
但是,我們是在webpack環(huán)境下使用,所以要改成webpack引用規(guī)則,即改成下面圖片所示
同級(jí)目錄: ./
上一級(jí)目錄: ../
2、配置如何加載woff等字體文件
大家都知道webpack要配置loader,聲明如何加載某類文件,所以我們要在config中聲明一下
使用之前要安裝url-loader、file-loader
在webpack的配置文件的loaders中配置
字體文件最后會(huì)以字符的形式保存在css文件中
以上這篇webpack中使用iconfont字體圖標(biāo)的方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
js實(shí)現(xiàn)點(diǎn)擊按鈕隨機(jī)生成背景顏色
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)點(diǎn)擊按鈕隨機(jī)生成背景顏色,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09js中promise如何取到[[PromiseResult]]問(wèn)題
這篇文章主要介紹了js中promise如何取到[[PromiseResult]]問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05js 模仿錨點(diǎn)定位的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇js 模仿錨點(diǎn)定位的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11javascript dom追加內(nèi)容實(shí)現(xiàn)示例
javascript dom追加內(nèi)容的使用還是比較廣泛的,在本文將為大家介紹下具體的使用方法,感興趣的朋友可以參考下2013-09-09關(guān)于HTTP傳輸中g(shù)zip壓縮的秘密探索分析
Gzip是一種流行的文件壓縮算法,現(xiàn)在的應(yīng)用十分廣泛,尤其是在Linux平臺(tái)。下面這篇文章主要給大家介紹了關(guān)于HTTP傳輸中g(shù)zip壓縮的相關(guān)資料,文中介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01Javascript 阻止瀏覽器默認(rèn)操作的實(shí)現(xiàn)代碼
在瀏覽器事件中,會(huì)觸發(fā)一些默認(rèn)動(dòng)作,比如:點(diǎn)擊一個(gè)鏈接時(shí),執(zhí)行完捕獲/冒泡動(dòng)作后,會(huì)觸發(fā)鏈接的默認(rèn)事件:跳轉(zhuǎn)到指定鏈接地址。2009-09-09