如何将 grunt-usemin 与字体真棒一起使用

【问题标题】：how to use grunt-usemin with font awesome如何将 grunt-usemin 与字体真棒一起使用
【发布时间】：2013-08-14 02:37:15
【问题描述】：

我正在尝试使用 grunt-usemin 来缩小我的 css。我在 index.html 中使用 Font Awesome

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

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

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

【问题讨论】：

标签： gruntjs font-awesome grunt-usemin

【解决方案1】：

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

../font/

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

【讨论】：

【解决方案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";。

【讨论】：