CODEWITHSUNDEEP
cssfontslessgruntjsfont-awesome
user3046831
user3046831

Reputation:

Grunt does not compile font-awesome.LESS or CSS

The already answered questions on this issue didn't solve my problem.

When I pull in the Font Awesome library with Bower and integrate the library directly in index.html or alternatively use the hosted version like in the following, the icons are displaying fine:

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

However, no icons are displayed when I am compiling font-awesome.less or font-awesome.css with Grunt (Please see the picture: The Bootstrap LESS which I import in base.less works fine!):

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 (excerpt):

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",
            }
        }
    },

I would appreciate your advise how to import / compile font-awesome.less correctly with Grunt or if this is a Font Awesome bug.

enter image description here

Upvotes: 0

Views: 1917

Answers (1)

Bass Jobsen
Bass Jobsen

Reputation: 49044

According your Grundfile.js you will create the ./public/assets/css/frontend.min.css file for your compiled css. You should set @fa-font-path relative to that file. Because of "http://localhost/testing/bower_components/bootstrap/fonts/" works in your situation also @icon-font-path: "testing/bower_components/bootstrap/fonts/".

In you frontend.less:

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

Alternatively copy the font files from /bower_components/bootstrap/fonts/ to /public/assets/fonts and set @icon-font-path: "../fonts" (the default already defined in "/bower_components/fontawesome/less/variables.less).

Notice that v4.2 of Font Awesome also allows you to set:

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

Upvotes: 1

Related Questions