Jekyll - Setup Font Awesome Icons

The icons from Font Awesome are great to use within a website. Now that I have my digital garden set up as a static website via Jekyll I wanted to use these icons.

Setup with an external source

Through Stackoverflow I found out that it can be very simple to use the icons of Font Awesome. Namely by adding the following stylesheet to the header (for Jekyll this is often _includes/head.html):

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

You can then display an icon as follows:

<i class='fa fa-home'></i>

Setup with your own hosting

However, I wanted to host the stylesheet myself and not load it from an external source. That also turned out to be very simple.

1. Download the Free for Web zip file from this page
2. From the zip file, copy the stylesheet css/all.min.css to the assets/css folder you are using as the source for Jekyll. I also renamed the stylesheet to fontawesome.all.min.css
3. Copy from the zip file the contents of the folder webfonts to the assets/webfonts folder that you use as source for Jekyll
4. Now add to the header (for Jekyll this is often _includes/head.html):

<link href="/assets/css/fontawesome.all.min.css" rel="stylesheet">

And then you can display the icon again as follows:

<i class='fa fa-home'></i>

Read other notes