How to include font awesome in a Grunt project?

Question

My question is how to include font-awesome in my Grunt project?

The part of my Gruntfile that seems related is:

        compass: {
            options: {
                sassDir: '/styles',
                cssDir: '.tmp/styles',
                imagesDir: '/images',
                javascriptsDir: '/scripts',
                fontsDir: '/styles/fonts',
                importPath: '/bower_components',
                relativeAssets: true
            },
            dist: {},
            server: {
                options: {
                    debugInfo: true
                }
            }
        },

PS I saw: Yeoman, How to reference a bower package (font-awesome)? --> They talk about copying, but don't show Grunt code.

PPS There is also Why does Yeoman build without /styles/fonts? - but it does not show how to work with fonts from font-awesome (coming from Bower)

Answer 1

You will use grunt-contrib-copy to copy the icon libraries.

First you need to load grunt-contrib-copy with:

grunt.loadNpmTasks('grunt-contrib-copy');

After, you will create the task with something like this:

grunt.initConfig({
    // ...
    copy: {
        libraries: {
            files: [
                {
                    expand: true,
                    cwd: 'bower_components/fontawesome/fonts/',
                    src: ['**/*'],
                    dest: 'public/fonts/'
                }
            ]
        }
    }
    // ...
});

At the end, you need to call this on the default task, if you use one:

grunt.registerTask('default', ['copy:libraries']);

Answer 2

The answer here is @font-face.

This helped a lot: entypo

Also, pictos.cc and fontsquirrel provide hints towards using @font-face.