Social Media Icons With Icon Fonts

  • follow us in feedly
Published October 30, 2013 by Brad Knutson
Social Media Icons with Icon Fonts

About 8 months ago I wrote a post about CSS3 Rollover Social Media Icons. The post has been by far the most popular I’ve published, accounting for a good chunk of my organic search traffic and receiving over 150 comments to date.

One of the commenters suggested I wrote a post about creating social media icons with icon fonts. I’ve done this before, but I agreed that it would be a great tutorial – so here it is!

What is an Icon Font?

Icon fonts are scalable vector icons that can be customized — size, color, or anything that can be done with CSS. They are great ways of creating more complex CSS transitions with icons – transitions that could not be replicated with images.

So how about an example?

Social Icons with Icon Fonts Example

View Demo

For this demo, I used the awesome icon fonts from WeLoveIconFonts. I chose to use the ‘brandico’ font because it had some styles of social icons that I wanted, but there are others to choose from.

Getting Started

To start out, we’ll need a really basic HTML structure.


<div class="brandico-facebook"></div>
<div class="brandico-twitter"></div>
<div class="brandico-instagram"></div>
<div class="brandico-linkedin"></div>
<div class="brandico-googleplus-rect"></div>
<div class="brandico-github"></div>
<div class="brandico-blogger"></div>

Notice that these are essentially empty divs – everything will be created using CSS. The classes need to be specific to what icon you want to show up. View the stylesheet for your icon font to see what classes/icons are available to you.

Before we get to the CSS, we need to include a reference for the icon font. WeLoveIconFonts makes this easy, and gives you the code to paste into your CSS.

@import url(http://weloveiconfonts.com/api/?family=brandico);
[class*="brandico-"]:before {
	font-family: 'brandico', sans-serif;
	font-size: 40px;
}

Ok – we’re all set up.

The top row of icons, labeled Standard are regular social media icons. No special styles applied here – this is the default behavior.

Essentially what is happening behind the scenes is that the icon font stylesheet is generating a HTML character code for the content property, and applying them to the pseudo class :before for each div. This adds the icon as a scalable vector graphic, just like regular text would be. I chose to give my icons a little padding and increased the font size, but other than that there are no styles applied to the Standard row.

The Hover Effect – Color Change row has a few styles applied to it. We will be changing the font color as well as the background color on hover.

.hover [class*="brandico-"]:hover {
	color: #FFF;
	background-color: #000;
}

I used the CSS transition property to make the animation smooth and appealing, and that’s it!

For the third and final row, More Hover Effects, I went a little nuts on the CSS. I applied a handful of styles and the end result turned out pretty cool.

.more-hover:hover [class*="brandico-"] {
	-webkit-transform: scale(0.5);
	-moz-transform: scale(0.5);
	-o-transform: scale(0.5);
	-ms-transform: scale(0.5);
	transform: scale(0.5);
	opacity: 0.5;
}
.more-hover [class*="brandico-"]:hover {
	color: #FFF;
	background-color: #000;
	opacity: 1;
	-webkit-transform: skew(10deg,10deg) scale(1.1);
	-moz-transform: skew(10deg,10deg) scale(1.1);
	-o-transform: skew(10deg,10deg) scale(1.1);
	-ms-transform: skew(10deg,10deg) scale(1.1);
	transform: skew(10deg,10deg) scale(1.1);
	box-shadow: 10px 10px 30px 1px rgba(255,255,255,0.25);
}

You could change things up however you’d like. As is true with any CSS, the sky is the limit for what you can come up with!

In Conclusion

A major advantage of icon fonts is to make very visually appealing animations and hover effects. With .jpeg or .png icons, we previously weren’t able to gracefully animate colors for the icon itself, and icon fonts make that possible for us.

I personally really enjoy using icon fonts! Have you found any cool examples? Share them in the comments below!

The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date

Subscribe

Topics

See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">