如何在使用Font Awesome时结合使用Grunt-usemin

Question

我正在尝试使用grunt-usemin来压缩我的CSS。我在index.html中像这样使用Font Awesome：

    <link rel="stylesheet" href="components/font-awesome/css/font-awesome.min.css">

当我运行usemin时，所有样式都被合并了。但是当我尝试使用缩小版本时，Font Awesome图标显示为Unicode方块（而不是预期的图标）。

有什么解决方法吗？如果需要，我可以提供更多信息。

- Josh Petitt

Answer 1

问题在于font-awesome.min.css引用了以下字体：

../font/

关键在于还要将 components/font-awesome/fonts 文件夹中的字体文件夹复制到正确相对路径的 fonts 文件夹中以解决问题。

- Josh Petitt

Answer 2

一种更简单的方法是在您的SCSS/LESS文件中重新定义$fa-font-path：

$fa-font-path: '../bower_components/font-awesome/fonts' !default;
// $fa-font-path:        "//netdna.bootstrapcdn.com/font-awesome/4.0.3/fonts" !default; // for referencing Bootstrap CDN font files directly

同样不要忘记在你的 main.scss 中导入 @import "font-awesome/scss/font-awesome";。

- Édouard Lopez