- 在官网下载
font-awesome官网.png -
在html文件头引入
.min.css为压缩后文件
.css为未压缩文件
引入任意文件均可
引入文件.png
引入font-awesome.png
导出font.png
文件目录.png
- 配置webpack
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ['file-loader']
}
使其能正常解析字体
更新
上面的方法在开发环境中好使，但是在标签中引入无法被webpack打包，因而这里我们采用第二种方法
引入文件.png
- 配置webpack
module: {
rules: [
......
{
test: /\.(ttf|eot|svg|png)$/, use: 'file-loader', //加载文件
},
{
test: /\.woff(2)?$/,
use: [
{
loader: 'url-loader',
options: {
limit: 10000,
mimetype: 'application/font-woff'
}
}
]
}
]
}
- 在需要字体的地方引入font-awesome即可
import './sass/font-awesome.min.css';
此时字体会被打包到webpack中，页面阿惠正常显示啦
