How to use font-awesome in Grails 3.2

This was surprisingly difficult. There are several posts, but none were complete or working, so here is a complete version.

  1. download font-awesome zip file from here
  2. create a directory grails-app/assets/fonts*
  3. unzip the contents of the zip into fonts.  so you should have something like:
    1. grails-app/fonts/css/font-awesome.min.css
    2. grails-app/fonts/fonts/FontAwesome.otf
    3. etc.
  4. Edit application.css under grails-app/assets/stylesheets and add**:
     *= require css/font-awesome
  5. edit build.gradle in the project root and add
assets {
 minifyJs = true
 minifyCss = true
 includes = ["fonts/*"]

Now restart your server, and try adding something like this in your gsp pages:

<i class="fa fa-camera-retro fa-4x"></i> fa-4x

And you should see a camera icon.


* personally, I would have put this in a directory called font-awesome rather than fonts, but every post on the web does it this way, and I am assuming they have reasons.

**surprisingly, this is intelligent enough to pull in the minified version, even though the name matches the non-minified file.  This method has the side effect of including the fonts on every page.  In theory, it would be possible to do it via direct include instead. e.g:

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

But this does not work. If anyone knows why, let  us know!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s