Using Font Awesome and :hover to create Social Media Buttons

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:

Font Awesome social media icons
Static Icons 
Font Awesome Social Media Icons
Hovered Icons

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.


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


.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:

This entry was posted in HTML/CSS and tagged , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *