Font Awesome is an online program that can be easily installed within your blog that allows you to use icons and brand logos as fonts, allowing for easy customisation, clearer, crisper social media icons for your blog, and lots of room for experimentation. During one of my many experiments with Font Awesome, I came across to ability to create social icons in the same style that you'd find on the Windows 8 interface, similar to 'Flat Design', a very popular trend in current blog design. If you're a fan of vivid, bright colours and like the idea of having Windows 8 Style Social Media Icons, then you've come to the right place.

First Step: Installation

Install is a scary word, but I can assure you, the process is really easy and really simple.
You're going to need to go into your blogs template and enter the following code just below the <head> tag.

Be sure to click save, and the icons should become available to use afterwards.

Second Step: Choosing and Adding Your Icons

There are a lot of Font Awesome icons to choose from (you can check out the huge list via the Font Awesome Icons page) but generally, I've included eight of the most used, most popular social media websites used by bloggers in the following example. Look at the following code:

Each line of code represents one social icon.
You can easily add another icon by using the following code and swapping out the title and the i class for the icon you want.

Add the code into a HTML/javascript widget (Blogger) and click save.

Step Three: Brand Colours and CSS Square Styles

Now it's time to turn those boring looking icons into amazing Windows 8 Style Social Icons.
Open up your Advanced CSS option within your design and enter the following code:

.fa-facebook {
background: #3b5998;
display: inline-block;
color: #ffffff;
font-size: 50px;
text-align: center;
width: 70px;
height: 70px;
line-height: 70px;
text-align: center;
vertical-align: middle;
margin: 0 2px 8px 0;
}

.fa-facebook:hover {
color: #ffffff;
background: #4061a6;
transition: all 0.5s;
}

.fa-twitter {
background: #00aced;
display: inline-block;
color: #ffffff;
font-size: 50px;
text-align: center;
width: 70px;
height: 70px;
line-height: 70px;
text-align: center;
vertical-align: middle;
margin: 0 2px 8px 0;
}

.fa-twitter:hover {
color: #ffffff;
background: #15bfff;
transition: all 0.5s;
}

.fa-pinterest-p {
background: #cc2127;
display: inline-block;
color: #ffffff;
font-size: 50px;
text-align: center;
width: 70px;
height: 70px;
line-height: 70px;
text-align: center;
vertical-align: middle;
margin: 0 2px 8px 0;
}

.fa-pinterest-p:hover {
color: #ffffff;
background: #dc252b;
transition: all 0.5s;
}

.fa-instagram {
background: #3f729b;
display: inline-block;
color: #ffffff;
font-size: 50px;
text-align: center;
width: 70px;
height: 70px;
line-height: 70px;
text-align: center;
vertical-align: middle;
margin: 0 2px 8px 0;
}

.fa-instagram:hover {
color: #ffffff;
background: #457ca9;
transition: all 0.5s;
}

.fa-heart {
background: #000000;
display: inline-block;
color: #ffffff;
font-size: 50px;
text-align: center;
width: 70px;
height: 70px;
line-height: 70px;
text-align: center;
vertical-align: middle;
margin: 0 2px 8px 0;
}

.fa-heart:hover {
color: #ffffff;
background: #141414;
transition: all 0.5s;
}

.fa-rss {
background: #f26522;
display: inline-block;
color: #ffffff;
font-size: 50px;
text-align: center;
width: 70px;
height: 70px;
line-height: 70px;
text-align: center;
vertical-align: middle;
margin: 0 2px 8px 0;
}

.fa-rss:hover {
color: #ffffff;
background: #f37235;
transition: all 0.5s;
}

.goodreads {
font-family: Arial, Sans-Serif;
background: #553b08;
display: inline-block;
color: #ffffff !important;
font-size: 65px;
text-align: center;
width: 70px;
height: 70px;
line-height: 47px;
text-align: center;
vertical-align: middle;
margin: 0 2px 8px 0;
}

.goodreads:hover {
color: #ffffff;
text-decoration: none;
background: #67470a;
transition: all 0.5s;
}

.fa-google-plus {
background: #dd4b39;
display: inline-block;
color: #ffffff;
font-size: 50px;
text-align: center;
width: 70px;
height: 70px;
line-height: 75px;
text-align: center;
vertical-align: middle;
margin: 0 2px 8px 0;
}

.fa-google-plus:hover {
color: #ffffff;
background: #e3695a;
transition: all 0.5s;
}

If your icons don't fit within your sidebar, you can either decrease the size of the icons or increase the width of your sidebar. If you're going to decrease the size of the icons, be sure to keep the width and height values identical in order to keep the square shape of the icon, decrease the line-height in order to keep the font awesome icon central to the coded square and decrease the font size so that your icons are the correct size for your blog.

You should now have social media icons similar to those you'd find on Windows 8. You can of course change the colours to anything you particularly want, as well as create more rounded icons by adding; border-radius: 35px; below margin: 0 2px 8px 0; of any or all icons you wish to change.

To add more social icons, please consult the icons page on Font Awesome. For more brand colours, please refer to BrandColours.net to find the colour that corresponds to your the social site.

Like This Tutorial? Have a Blogger Design Question?

12 comments:

Alise03 August, 2015
Great tutorial! I've never heard of Font Awesome but this is pretty cool, and especially helpful. Same with Brand Colours, I feel like that could be really useful!
Ash @ The Nashvillian03 August, 2015
This is a great tutorial! I love that you list everything out in steps that are so easy to follow!
Zoe N.04 August, 2015
I absolutely love Font Awesome. :) Such clean and well-drawn icons and so easy to implement as well. :) Wonderful and thorough tutorial Amanda - thank you for taking the time to share this with us all! ♥
Karen09 August, 2015
Thanks for taking the time to share this tutorial. I have been trying to find clean icons for a while. This was really easy thanks to you!
Social Media Services13 December, 2017
Thank you for sharing! This article is very helpful and easy to understand. Have a good day!

Ancy merina19 February, 2018
This comment has been removed by the author.
Angela21 September, 2018
This post is exciting.
Deepali Singh31 December, 2022
Do you want to know about Harry Lewis Net Worth, his early life biography career, and relationship status?