» » » » » How To Code Windows 8 Style Social Media Icons

How To Code Windows 8 Style Social Media Icons

Oleh
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?

0 Komentar untuk "How To Code Windows 8 Style Social Media Icons"

Back To Top