如何使用grunt-usemin与字体真棒 [英] how to use grunt-usemin with font awesome

问题描述

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

 < link rel =stylesheethref =components / font -awesome / CSS /字体awesome.min.css> 
  

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

有关如何解决此问题的任何想法？如果需要的话，我可以包含更多的信息。 解决方案

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

  ../ font / 
  

修复的关键还在于将字体文件夹从components / font-awesome / fonts文件夹中复制到位于右侧相对路径的字体文件夹中。

I am trying to use grunt-usemin to minify my css. I am using Font Awesome like this within my index.html

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

When I run usemin, I get all the styles combined. However, when I try to use the minified version, the Font Awesome icons show up as unicode squares (not as the intended icons).

Any ideas on how to fix this? I can include more information if needed.

解决方案

The problem was that font-awesome.min.css is referencing fonts in:

../font/

The key to fixing was to also copy the fonts folder out of the components/font-awesome/fonts folder to a fonts folder that is at the right relative path.

这篇关于如何使用grunt-usemin与字体真棒的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！