Adding Font Awesome To Ghost

Loading page, please wait...

Still loading...

Lo... Wait. What?!

Just kiding. The icons you saw are the things we gonna talk about today.

Why I want to add Font Awesome to Ghost? Because it's awesome!

Well, it's always a problem that if you want to use nice icon with your website and really keep icons with in a style. I was trying to add some social media share buttons to the end of my every post, the thing is, I can't find some good button with consistency until I met Font Awesome. My problem was solved within a minute. Here's how you can add Font Awesome to your Ghost.

# 1. Open default.hbs

Your default.hbs will be located in your ghost installation folder.

Go to /folder/to/ghost/content/themes/casper(or the theme you are using), and you will find it.

2. Edit default.hbs

First, locate the line:

<link rel="stylesheet" type="text/css" href="{{asset "css/screen.css"}}" />

Then, put

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

right above the line we just found.

Now you can use Font Awesome in every page of your Ghost.

3. Use Font Awesome in posts

It's really easy.

All you need is to use this code <i calss=""></i> and put the icon name in between the "". Here is a demo:

Code: I really need to write a blog today, but I need <i class="fa fa-wifi"></i> first!

Demo: I really need to write a blog today, but I need first!

For a list of icons you can use, go to Font Awesome to find out.

4.Use Font Awesome for your share button

This time, find post.hbs in the same folder as default.hbs.

Find <section class="share">.

You will see some code like this:

<a class="icon-twitter" href="https://twitter.com/share?text={{encode title}}&amp;url={{url absolute="true"}}"onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;">
    <span class="hidden">Twitter</span>
</a>

Change icon-twitter to fa fa-twitter to use Font Awesome.

Similarly, you can use this as an example to create share buttons of your own. Just change the icon to what website you want to share and adjust the url accordingly.

Try Font Awesome today and let me know what you think!

And don't forget to share this to your firends!