如何使用grunt usemin与字体真棒

Question

我正在尝试使用grunt usemin来缩小我的css。我在我的index.html 中使用了这样的字体真棒

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

当我运行usemin时，我会将所有的样式组合在一起。然而，当我尝试使用缩小版时，Font Awesome图标显示为unicode方块（而不是预期的图标）。

关于如何解决这个问题有什么想法吗？如果需要，我可以提供更多信息。

Answer 1

问题是font-awesome.min.css引用了中的字体

../font/

修复的关键是还将字体文件夹从components/font真棒/fonts文件夹复制到相对路径正确的字体文件夹中。

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";。