Don’t have a design background? You can still create some great looking social media buttons! When I need to create anything design related I usually start by opening up Illustrator, but when I found out about Font Awesome I knew my life just got a whole lot easier.

If you don’t know about Font Awesome already google it…now! It’s a completely free vector icon font that lets you customize each icon with only CSS, and this is only one of the many ways to use it.

I wanted to create a set of social media buttons for the contact section of my website. One that is static, and one that showed when hovering on the links.

This is what I ended up with:

Basically, I created two sets of icons using stacked Font Awesome icons and styled them with CSS. Then used positioning and :hover to make them switch when the user wants to click on the link.

HTML

<div class=”icon”>
<div class=”top”>
<a href=””><span class=”fa-stack fa-3x”> <i class=”fa fa-circle-thin fa-stack-2x”></i> <i class=”fa fa-twitter fa-stack-1x fa-inverse”></i> </span></a>
</div>

<div class=”bottom”>
<div class=”overlayIcon”><a href=”” class=”overlayIcon” target=”_blank”><span class=”fa-stack fa-3x”> <i class=”fa fa-circle fa-stack-2x”></i> <i class=”fa fa-twitter fa-stack-1x fa-inverse”></i> </span></a></div> </div>
</div>

CSS

.bottom {
position: absolute;
display: none;
top:0; left: 0;
bottom: 0;
right: 0;
}



.icons:hover .bottom {
display: block;
}


div.overlayIcon i.fa-inverse {
color: #A17C7F;
}


i.fa-stack .fa-3x:hover {
color: #A17C7F;
}

*A quick note: Font Awesome tells you on their website that Adblock Plus can remove Font Awesome brand icons. Just a heads up that these buttons might not show up in all browers.

If you want to see these in action you can check out the code pen here: http://codepen.io/hbanks/pen/wBeeJq.