webpack中使用iconfont字體圖標的方法
更新時間：2018年02月22日 10:31:43 作者：TowYingWang
下面小編就為大家分享一篇webpack中使用iconfont字體圖標的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
入坑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字體圖標的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
一直讓我困擾的是，我不知道如何去讓這個效果 自動播放，或者費了很多周折。這可能叫初始化。2010-05-05
Three.js實現(xiàn)3D乒乓球小游戲(物理效果)
本文將使用React Three Fiber 和 Cannon.js 來實現(xiàn)一個具有物理特性的乒乓球小游戲，使用 React Three Fiber 搭建基礎(chǔ)三維場景、如何使用新技術(shù)棧給場景中對象的添加物理特性等，最后利用上述知識點，將開發(fā)一個簡單的乒乓球小游戲,需要的朋友可以參考下2023-03-03
本篇文章主要介紹了JavaScript跨域，詳細的總結(jié)了什么是跨域，并介紹了幾種解決辦法，感興趣的小伙伴們可以參考一下。2016-10-10
聊聊那些使用前端Javascript實現(xiàn)的機器學(xué)習(xí)類庫
本文介紹了前端Javascript實現(xiàn)的機器學(xué)習(xí)類庫，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了在頁面加載之后執(zhí)行JavaScript的詳細過程，本文通過實例代碼文字解說給大家講解的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-06-06
JavaScript函數(shù)apply()和call()用法與異同分析
這篇文章主要介紹了JavaScript函數(shù)apply()和call()用法與異同,結(jié)合實例形式分析了apply()和call()的功能、區(qū)別、使用方法及相關(guān)操作注意事項,需要的朋友可以參考下2018-08-08
JS+CSS實現(xiàn)超漂亮的動態(tài)翻書效果(思路詳解)
我們平常沖浪時是不是看過一些學(xué)校高級的錄取通知書，翻開通知書就能看見里面的內(nèi)容，呈現(xiàn)出逼真的3D效果，本文帶領(lǐng)大家基于JS+CSS實現(xiàn)超漂亮的動態(tài)翻書效果,需要的朋友可以參考下2023-05-05
JS?getRandomValues和Math.random方法深入解析
這篇文章主要為大家介紹了JS?getRandomValues和Math.random方法深入詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
下面小編就為大家?guī)硪黄拗浦荒茌斎霐?shù)字的實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考，一起跟隨小編過來看看吧2016-05-05
在訪問某個網(wǎng)站或者博客時，如果該站點為用戶提供內(nèi)容的評級或投票功能的話，可以增強用戶參與的交互性之外，更可以給用戶一種“主人”的親切感，使得用戶可以切實地參與到網(wǎng)站內(nèi)容的評價體系中來。2010-01-01