Fontawesome is not working when project is built with grunt

Question

I\'m using the font library font awesome. It works when the project is not built/uglified with grunt.

But when I\'m building the project with grunt it\'s not workin

Answer 1

If you're using SASS in your project, I found a more straightforward way that doesn't involve changing the grunt file if anyone is interested:

http://likesalmon.net/use-font-awesome-on-yeoman-angularjs-projects/

Basically include these 2 lines at the top of your main.scss file and the fonts should work.

$fa-font-path: "/bower_components/font-awesome/fonts/";
@import "font-awesome/scss/font-awesome";

Answer 2

I don't know what I was doing wrong but none of the proposed solutions worked for me. Whatever I tried, the production (distribution) release would not display the icons.

I ended up using the following components: https://github.com/philya/font-awesome-polymer-icons-generator and https://github.com/philya/font-awesome-polymer-icons

font-awesome-polymer-icons-generator

Note: python needed

It allows you to generate a font-awesome SVG icon set for the icons (you have in use) in your project.

As an example, say I want the icons code, line-chart, github-alt in my projects, then I'd generate them like so:

./makefaicons.py myappname code line-chart github-alt

This generates the file build/myappname-icons.html. This file then needs to be imported into my component just like any other component:

<link rel="import" href="<pathToFile>/myappname-icons.html">

then I can get the font-awesome icons like so:

<core-icon icon="myappname:line-chart"></core-icon>

i.e. I prefix the normal font-awesome name with the name I gave when I created the icon set.

font-awesome-polymer-icons

You can also just import the pre-built full set of font-awesome icons:

bower install font-awesome-polymer-icons

Keep in mind that this adds 300+KB to your distribution size and the author notes that it is not recommended for production use.

Answer 3

For those using Google App Engine, the following worked for me:

Add to Gruntfile.js:

copy: {
  build_font_awesome: {
    files: [
      {
         expand: true,
         flatten: true,
         src: 'vendor/components-font-awesome/fonts/*',
         dest: '<%= build_dir %>/fonts' 
      }
    ]
  },
  compile_font_awesome: {
    files: [
      {
         expand: true,
         flatten: true,
         src: 'vendor/components-font-awesome/fonts/*',
         dest: '<%= compile_dir %>/fonts' 
      }
    ]
  }
}

I am using LESS so I imported font-awesome.less by adding this to my main.less file.

@import '../../vendor/components-font-awesome/less/font-awesome.less';

Then I added this to my app.yaml file.

handlers:
- url: /fonts
  static_dir: static/fonts