Monday, 3 August 2015

How To Code Windows 8 Style Social Media Icons

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.

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

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:

<a href="URL LINK"><i class="fa fa-facebook"></i></a>
<a href="URL LINK"><i class="fa fa-twitter"></i></a>
<a href="URL LINK"><i class="fa fa-pinterest-p"></i></a>
<a href="URL LINK"><i class="fa fa-instagram"></i></a>
<a href="URL LINK"><i class="fa fa-heart"></i></a>
<a href="URL LINK"><i class="fa fa-rss"></i></a>
<a class="goodreads" href="URL LINK">g</a>
<a href="URL LINK"> <i class="fa fa-google-plus"></i></a>

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.

<a href="URL LINK"><i class="ICON CODE"></i></a>

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?

9 comments:

  1. 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!

    ReplyDelete
    Replies
    1. Thanks Alise! Brand colours was something I used at Beautiful Bookish Butterflies and think it could be great depending on certain blog designs, so pleased you liked it :)

      Delete
  2. This is a great tutorial! I love that you list everything out in steps that are so easy to follow!

    ReplyDelete
    Replies
    1. Thank you Ash, it's much appreciated! I hope to share more about Font Awesome in the future.

      Delete
  3. 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! ♥

    ReplyDelete
    Replies
    1. As do I Zoe, I just find it SO GOOD, you know? You're welcome, I'm pleased you liked it :)

      Delete
  4. 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!

    ReplyDelete
    Replies
    1. You're welcome Karen! Hopefully Font Awesome will be brilliant for you! :)

      Delete
  5. this is really too useful and have more ideas from yours. keep sharing many techniques. eagerly waiting for your new blog and useful information. keep doing more.
    SEO Company in Chennai

    ReplyDelete