/ Search Engine Optimization

Setting Up "Font Awesome" On A Ghost Blog

Here in Honolulu, Hawaii, we like doing things right. And if it can also be done easy, even better.

If you're looking for an icon to insert into a web page or app, Font Awesome is a collection of icons that easily scales to fit the size of different screens.

You want an icon so that someone can easily tap an envelope to send an email?

No Problem.

How about something to spin?


You got it.

Want someone to send you money?


I just it.

The only down side when using Font Awesome with the Ghost Blog Platform is that the icon does not show up in the preview pane on the right side of the edit window. You have to actually load the webpage to see if the icon is in the right spot. It's a minor inconvenience.

Setting Up Font-Awesome With Ghost Blog

  • Copy the code from a font-awesome CDN. I like to use bootstrap cdn. The code should look something like this.
  • <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">

  • Go to the `default.hbs` file of the Ghost Theme that you are using. This can be found as follows:


    Casper is the name of the default theme. If you're using a different theme, then substitute Casper with name of the theme that you are using.

  • Use your favorite text editor and open up `default.hbs` [I use VIM](https://en.wikipedia.org/wiki/Vim_(text_editor)).
  • Paste in the link from paragraph in the section that includes the css code .

    Desktop image of the section to insert the font-awesome code

  • Save and restart ghost.

    That's it. To use a font, just follow the examples that are given on the font-awesome website. The general format is:

    <i class="fa fa-rocket" aria-hidden="true"></i>

    You are ready for lift-off.

    <a href=mailto:"dfklein@sympile.com">Questions or Comments?