0

this post has half the process for using font awesome in a project. The steps are:

  1. download font-awesome zip and extract into grails-app/assets/fonts dir.
  2. modify build.gradle to add includes = ["fonts/*"] under assets
  3. ?

  4. Use the font in your code, e.g.

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

The question is, what is step 3? I assume there are two options:

  1. put something like < link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css"> at the top of your gsp page, but what is the path? I tried guessing, e.g. href="/assets/fonts/css/font-awesome.min.css" but this does not work even after restart.
  2. Put something in application.css. I have no idea what this could be, as it currently only refers to files in its own directory. I even read the manual, but could not figure it out. The manual mentions "*= require font-awesome" but presumably this requires more code somewhere as it doesn't work.

Any suggestions? Grails certainly makes some very hard things easy, but it also makes some easy things hard.

John Little
  • 10,707
  • 19
  • 86
  • 158

3 Answers3

2

You may have to change the directory references inside the fontawesome.css file. Try for a replace of all the references to ../fonts/fontawesome for fontawesome and check if it works.

This assumes having the font-awesome.css file inside the assets/stylesheets directory and the fonts inside the fonts directory. Then, in build.gradle you should have something like:

assets {
    minifyJs = true
    minifyCss = true
    includes = ["fonts/*"]
}

In your layout GSP file's (main.gsp) <head> you should have something like:

<asset:stylesheet src="application.css"/>

Finally, in your application.css you should have something like:

*= require font-awesome

The require should have the same name as the CSS file without the .css extension. So, if you have the minified version of font-awesome it should look like this instead:

*= require font-awesome.min

Note that by doing that you don't need to add the CSS include to GSP pages.

Jordi Vilaplana
  • 415
  • 1
  • 4
  • 9
  • I presume the disadvantage of moving font-awesome.min.css into the stylesheets directory is that it may break the paths of font-awesome, and means if you want to deploy a new font awesome version, you need to remember to change the file locations after unzipping it. However, grails seems to be designed to work this way. – John Little Jul 11 '17 at 09:52
2

Alternatively you can just generate an embedding code on the website of fontawesome (http://fontawesome.io/get-started/) and add it to your main.gsp file 

<script src="https://use.fontawesome.com/xxxxxxxxxx.js"></script>
Kloker
  • 499
  • 4
  • 14
  • This looks like a good alternative to downloading the assets as I have done. Why doesnt everyone do it the above way? Is it because they are worried that the CDN of font awesome will go down or change? – John Little Jul 11 '17 at 09:50
  • I think so. However, [there are some clever workarounds](https://stackoverflow.com/a/26198380/1859197) to this that you may find useful :-) – Jordi Vilaplana Jul 11 '17 at 11:48
0

I got the answer to step number 3 from here:

The answer is to add the following to application.css

"*= require css/font-awesome"

Surprisingly, this will pull on font-awesome.min.css from the fonts/css/ dir where the files are exploded from the zip distribution.

Jordi and klocker also supplied valid solutions, but the above one is what I was looking for.

How to reference the assets directly via a link is still a mystery.

John Little
  • 10,707
  • 19
  • 86
  • 158