Grunt不编译font-awesome.LESS或CSS

Question

关于这个问题已经回答的问题并没有解决我的问题。

当我使用Font Awesome提取Bower库并将库直接集成到index.html中，或者使用托管版本时，如下所示，图标显示正常：

<link href="bower_components/fontawesome/css/font-awesome.css" rel="stylesheet" />

or

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

但是，当我使用Grunt编译font-awesome.less或font-awesome.css时，没有显示图标（请参阅图片：我在base.less导入的Bootstrap LESS工作正常！） ：

frontend.less：

@import "base.less";
@import "/bower_components/fontawesome/less/font-awesome.less";

//@import (less)"//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css";

Gruntfile.js（摘录）：

less: {
        development: {
            options: {
              compress: true,  // Minification
            },
            files: {
              // Compile frontend.less into frontend.css
              "./public/assets/css/frontend.min.css":"./app/assets/less/frontend.less",
              // Compile backend.less into backend.css
              "./public/assets/css/backend.min.css":"./app/assets/less/backend.less",
            }
        }
    }, 

非常感谢您建议如何使用Grunt正确导入/编译font-awesome.less，或者这是一个Font Awesome错误。

Answer 1

根据您的Grundfile.js，您将为已编译的css创建./public/assets/css/frontend.min.css文件。您应该相对于该文件设置@ fa-font-path。由于"http://localhost/testing/bower_components/bootstrap/fonts/"适用于您的情况@icon-font-path: "testing/bower_components/bootstrap/fonts/"。

在你的前端。无：

@import "base.less";
@import "/bower_components/fontawesome/less/font-awesome.less";
@icon-font-path: "testing/bower_components/bootstrap/fonts/";

或者将字体文件从/bower_components/bootstrap/fonts/复制到/public/assets/fonts并设置@ icon-font-path：＆＃34; ../ fonts＆＃34; （默认已在＆＃34; /bower_components/fontawesome/less/variables.less中定义。）

请注意，Font Awesome的v4.2还允许您设置：

@fa-font-path:        "//netdna.bootstrapcdn.com/font-awesome/4.2.0/fonts"; // for referencing Bootstrap CDN font files directly