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.

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.