如果你跟我一样是用 angular2-webpack-starter 作为 Angular2 的脚手架的话,就可能在整合 font-awesome 时遇到问题。

因为此脚手架的设定是用 raw-loader 来载入 CSS:

1
2
3
4
5
6
7
8
9
10
/*
* Raw loader support for *.css files
* Returns file content as string
*
* See: https://github.com/webpack/raw-loader
*/
{
test: /\.css$/,
loader: 'raw-loader'
},

而 font-awesome 因为资源文件需要导入的原因就要用到 css-loaderstyle-loader,用 raw-loader 就载入不了图标了。

解决方案

首先安装 css-loaderstyle-loader:

1
cnpm install -D css-loader style-loader

因为 raw-loader 的匹配正则被设置为 \.css$, 所以我们可以把 ? 问号加在行尾来 bypass 此正则,即使用以下代码来载入 font-awesome

1
require('style-loader!css-loader!font-awesome/css/font-awesome.css?');

然后图标就可以正常显示了:

1
<i class="fa fa-floppy-o" aria-hidden="true"></i>