webpack中如何使用iconfont字體圖標

http://blog.csdn.net/xiaoermingn/article/details/53543001

 

入坑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文件中