Question

我正在尝试使用grunt-usemin来缩小我的CSS。我在index.html

中使用了这样的Font Awesome

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

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

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

Answer 1

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

../font/

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

Answer 2

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

$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

另外，请勿忘记@import "font-awesome/scss/font-awesome";中的main.scss。

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

2 个答案: