How to install Font Awesome on Blogger to display icons on blog

Font Awesome offer a wide range (600+) of high quality scalable vector icons, that can be easily be used on your blog and customised using CSS. This post will show you to add the icon font to your Blogger blog and use icons within your content.

Install Font Awesome on Blogger

Adding Font Awesome to Blogger is pretty easy. Head over to the Font Awesome Get Started page and enter your email address. They’ll email you with a unique embed code that looks similar to the following

<script src="https://use.fontawesome.com/000aaaa000.js"></script>

Now you need to copy and paste that into your theme’s head section. On Blogger, go to Theme > Edit HTML and find the closing head tag (</head>). Right above </head>, paste the embed code from Font Awesome.

Add Font Awesome Icons to Your Blogger Blog

Now that Font Awesome is installed, we can use some of icons on our blogs to display in blog posts, sidebar, navigation menu, buttons and so on. To do so we use a simple line of code in our HTML.

Visit the Font Awesome Icon page and click on the icon you want to use. On the dedicated icon page, you’ll see code that looks like this

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

Paste this where you want to display the icon – this could be in a post, page, sidebar gadget, navigation, footer or anywhere else that accepts HTML.

Example: Adding <i class="fa fa-twitter" aria-hidden="true"></i> would display

In order to make the icon a clickable link, we can wrap it in link tags like so

<a href="URL" title="Facebook" target="_blank" rel="nofollow"><i class="fa fa-facebook" aria-hidden="true"></i></a>

Customising Font Awesome Icons using CSS

You can customise the CSS and change the icon colour, size, shadows and so on. To do this, use the icons class name (like fa-twitter) or using the general class fa to target all icons.

.fa { /* CSS Styling Goes Here */ } .fa-twitter { /* CSS Styling Goes Here */ }

There’s lots of other ways to customise the icons too, check out the examples page here.

Add Font Awesome Icon to a Clickable Button

We can also add the icon before or after a button using CSS. First, you’ll want to style a text link to look like a button, you can read how to do that here.

Install Font Awesome on Blogger and Add an Icon after a Button

Now using the unicode (looks like f000) provided on the dedicated icon page on Font Awesome, we’ll add the following CSS to display the icon after our button.

.blackbtn:after { 
content: "\f000"; 
font-family: FontAwesome; 
font-size: 16px; 
padding-left: 10px; 
}

or before our button

.blackbtn:before { 
content: "\f000"; 
font-family: FontAwesome; 
font-size: 16px; 
padding-right: 10px; 
}

Replace f000 with the unicode number of your icon and customise the CSS as you wish.

So there is how to add Font Awesome to your Blogger blog and use icons within your content. As you can see there’s so much you can do with Font Awesome icons on your blog! Try using them in your navigation menu for social media icons or post footer for share icons, as a search icon or when creating a list within your blog post.

Post last updated:

5 responses to “How to install Font Awesome on Blogger to display icons on blog”

  1. Anette

    Hi! Can you help me with footer problem? How can I make different colors in footer like here in your blog? Like you see, in my blog it’s all just black… http://www.anettemarie.fi

    Thank you!

    1. Hello Anette, your blog is private so I can’t access. You can use the different IDs and classes to apply CSS to the different section of your footer.

  2. I have been trying for so long to add social media icons to my navbar and failing every time, and this just worked!! I’m so happy 🙂 Thank you once more for these amazing posts!

    But the 2 icons I added are glued to each other, how can I change the space between them, and their size?

    I tried using
    .fa-icon-name { size:px } and .fa-icon-name { font-size:px } but they didn’t work, maybe I’m putting the code in the wrong place?

    xx

    1. Hello, no problem! This should work for you – .fa {font-size: 16px; padding: 0 5px; }

  3. Hello! You posts are very, very helpful and easy to follow, so thank you a bunch for those! This isn’t very much related to this post per se, but how can I make it so that the snippets of my blog posts are centered? My ‘read more’ jumplink is centered but I can’t figure out how to center the snippet as well. My blog is private at the moment as I’m making changes to it but I can allow you permission to view it if you need to. Thank you!

Join over 1,000 creators and small biz owners and be part of The Roundup

Ready to build your website, grow your audience and monetise your platforms? Receive the latest WordPress news, social media updates, SEO tips and industry insights straight to your inbox.

By signing up you’ll receive our fortnightly newsletter and free resources. No spam or unnecessary emails. You can unsubscribe at any time.