Like a lot of back end folks I suspect I’m not alone when I look at a project like Font Awesome and go “Great Work; damn if I know how to actually use that.” I’d normally toss it over the wall to a front end guy like my buddy Dv but this is for my side project so I’m all alone on this one. Since I really, really don’t feel that I understand the world of front end work and CSS / SCSS very well I thought I’d write it all down for you (and myself).
Here’s what not to do
I took a number of wrong steps:
- I watched this video and it is really good – except for the specific steps he gave me didn’t work. I really don’t understand why and it might have been me.
- I used the font-awesome-sass gem and it too failed me hard.
- Don’t follow the Stack Overflow post here.
In all of the above cases I got the error No route matches [GET] “/assets/fontawesome-webfont.ttf” and I just couldn’t get past it. The Stack Overflow post might have ultimately gotten me there but it did take me to a different gem – font-awesome-rails discussed in the next section.
You should note that I don’t meant to malign any of the urls in the above material – I’m not a css / front end guy by any means. All I did was some simple googles and the processes I was taken through ultimately didn’t work and I blew over an hour of development time to find that out.
Here’s What To Do
What you actually need is to do the following:
- Install the font-awesome-rails gem. Just add gem “font-awesome-rails” to your Gemfile and then do the bundle install dance.
- In your application.css.scss file add the line: @import “font-awesome”;
- Stop and start your rails server.
- Add to a test .html.erb view file this line**: fa_icon “camera-retro” ** (you’ll probably need to enclose that in output tags using %= and angle braces)
- Render that test .html.erb view file in your browser and you should see a camera icon. What this is doing behind the scenes is outputting this html:
Here are some important urls:
- The Icon Search Page for Font Awesome - Use this to search for the icon you need. This is the most useful page on their site.
- Font Awesome Home Page
- Font Awesome Rails Gem -
- The Font Awesome Github Project
- The Cheat Sheet
- Useful Example of Font Awesome at the HTML Level
- Example of Using the Search Icon
- The General Examples Page
- The Getting Started Page
- Another Way to Search for an Icon