HTML5 and CSS3 Social Media Icons Without Images

As a web developer you’re always looking for ways to innovate and do things in a more efficient manner as new technologies emerge and browsers become more sophisticated. One of the ways that web developers are attempting to innovate more is by using CSS, SVG, embedded icon fonts and a number of other techniques to configure layouts and handle the visual look and feel for websites without relying on the use of images (as they would have had to in the past).

There are many benefits to this. For one, the greater number of images you use, the greater number of HTTP requests you are going to have to make. As a result your page is going to inevitably load slower due to the greater number of requests. However if you can achieve the same effect (or a similar effect) visually without the use of images (or, at the very least, fewer images) through the use of CSS3 gradients, icon fonts, SVG graphics (drawing shapes in the browser using XML) or other techniques, then the quicker load time will be a better user experience for your users. There’s also an SEO benefit to this because Google even takes page load times into account as one of it’s considerations when ranking web pages. So it’s in your best interest to have as fast a page load time as possible.

On top of this, with the emergence of Retina display on the iPhone, iPad and other devices, the whole process of serving up images now has/had another consideration thrown into the mix. If your device supports Retina display, you’d want to serve up the larger 2X sized retina images. If it does not, for efficiency’s sake, you’d want to server up the smaller images. This means 1) detecting in your website’s code whether or not the client is using a retina-display device and 2) figuring out how to properly serve up those images based on that condition. There are some really good tutorials on various techniques on how to handle this out there, but you still have to put the effort in.

Or wouldn’t it be nice to use one of the the above mentioned technologies and have retina stuff all taken care of due to the fact that visual components are essentially being drawn in the browser? Here again, there can be tremendous benefits to having to rely on images.

More could definitely be said about the subject, but one place where it may be of great benefit to leave the use of images behind is when it comes to displaying social media icons on your website. Just about every website out there has some sort of social media

Recently I’ve stumbled across a tool that is a great solution for creating icon based fonts and in this post specifically we’re gonna be talking about creating social media icons without the use of images by using an embedded webfont. These icons will render well in all modern browsers all the way back to IE8. IE7 not so much (but for that if you really wanted to you could use an image fallback). The result will be something like the following…

But it’s easy to make these different depending on how you style the CSS. That’s what’s great about not having to rely on images. The changes can be made in code, not in Photoshop!

So head on over to Icomoon.com and take a look at their app. Using their web application pick and choose which icons you want to be part of your icon set. I picked all the social media icon but you could certainly pick more if you wanted to.

The package itself will show you how to embed these fonts in to your webpage and use them. There are 2 different ways that you can enbed this icon font: one using the HTML5 “data-icon” attribute and the other using classes. I chose the class option as shown…

@font-face {
  font-family: 'IcomoonSocial';
  src: url('fonts/IcomoonSocial.eot');
  src: url('fonts/IcomoonSocial.eot?#iefix') format('embedded-opentype'), url('fonts/IcomoonSocial.woff') format('woff'), url('fonts/IcomoonSocial.ttf') format('truetype'), url('fonts/IcomoonSocial.svg#IcomoonSocial') format('svg');
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
}

I also edited the font-family name to be specific as a social font. This CSS will embed your icon font for use within your web pages. Next specify the styles for the general “icon” class…

[class*="nbs-social"] {
  width: 30px;
  height: 30px;
  line-height: 30px;
  display: inline-block;
  font-size: 18px;
  text-align: center;
  padding-top: 2px;
  -webkit-transition: all 0.7s;
  -moz-transition: all 0.7s;
  -o-transition: all 0.7s;
  transition: all 0.7s;
  color: #fff;
  border-radius: 15px;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  text-decoration:none;
}
[class*="nbs-social"]:hover {
  top: -30px;
  background: #666;
  color: #fff;
}
[class*="nbs-social"]:before {
  font-family: 'IcomoonSocial';
  speak: none;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

Note that I used the “nbs” prefix (for Nine Bit Studios). It is often a good idea to prefix your CSS with some sort of unique string identifier so that your CSS does not collide with some other CSS selector. For example, if we just called these classes “.social” or “.icon”, there is a very real possibility that some other CSS that’s defined to style some other part of our website is using those names as classes (and we might not be immediately aware of it. Maybe we’ve installed a WordPress or jQuery plugin that uses those class names. Hopefully, plugin authors have followed best practices and prefixed their CSS as well, but you can never be 100% sure. As a result, in this situation if this were to happen, one style definition will be overridden and will not display the HTML elements as they were intended to. The one appearing second in all of the page’s CSS would override the first. Remember that in CSS last-in wins.

Now that we have all of our base CSS defined and prefixed for the general icon layour, we can start defining the styling (colors and content) for individual icons of each social media type…

/*** RSS ***/
.nbs-social-rss {
  background: #e0812a;
}
.nbs-social-rss:before {
  content: "\e005";
}
/* Variations: "\e006" "\e007" */
/*** MAIL ***/
.nbs-social-mail {
  background: #999;
}
.nbs-social-mail:before {
  content: "\e00b";
}
.nbs-social-mail:hover {
  color: #fff;
}
/* Variations: "\e009" "\e00b" "\e00c" */
/*** FACEBOOK ***/
.nbs-social-facebook {
  background: #3b5997;
}
.nbs-social-facebook:before {
  content: "\e000";
}
/* Variations: "\e001" "\e002" */
/*** TWITTER ***/
.nbs-social-twitter {
  background: #41b7d8;
  color: #fff;
}
.nbs-social-twitter:before {
  content: "\e008";
}
/* Variations: "\e003" "\e004" */

… and so on for which ever icon fonts you want to use. You just have to make sure that you put the correct codes in, and that they map properly to your CSS definition. I’ve even put some variations in comments if you wanted to plug the different codes in for the different icons.

Now if we create links and give them our classes they’ll be transformed into icons with CSS! It’s as easy as that!

<a href="#" class="nbs-social-rss"></a> 
<a href="#" class="nbs-social-mail"></a> 
<a href="#" class="nbs-social-facebook"></a> 
<a href="#" class="nbs-social-twitter"></a> 
<a href="#" class="nbs-social-googleplus"></a> 
<a href="#" class="nbs-social-linkedin"></a>
<a href="#" class="nbs-social-flickr"></a>
<a href="#" class="nbs-social-youtube"></a>
<a href="#" class="nbs-social-vimeo"></a>
<a href="#" class="nbs-social-pinterest"></a>
<a href="#" class="nbs-social-yelp"></a>

Check out the demo and/or grab the files below to see this in action…

View Demo Download Files