A few days ago I had the chance to watch a talk by Steve Souders, who is one of the world's top experts on website performance. I started thinking about how to apply some of the techniques that he mentions to my site, and I decided to replace the icons that appear at the top. These are links to subscribe to blog updates, the RSS feed, the feedburner email subscription, and links to twitter and Google+, which I update when there are new blog posts. I decided to replace these image icons with icons made using only CSS.

This has several advantages:

• 4 HTTP calls less. And as the number of TCP connections from the browser is limited, this would allow other content to be downloaded faster
• Potentially one DNS call less, because the g+ icon is in a different domain than most of the blog
• A few less KB of data that need to be transmitted over the wire
• 3 less requests to the AppEngine web server, for the images
• Nicer, more sleek look, which is resolution independent. Try zooming into the icons!

So here is how I did it. First, the general style for all the buttons. Using the same color schema as the rest of the blog:

/* Subscribe icons */
.subscribe-icon {
  /* Little boxes on the right side. */
  display: inline;
  float: right;

  /* Same colors as the title. */
  color: #eee;
  background-color: #34343e;

  /* Buttons with rounded corners, 2 px between them. */
  margin: 1px;
  border-radius: 4px;
}

The twitter icon is probably the easiest one, I simply took a t in an appropriate font, and gave it a reasonable size and position. I added a little bit of shadow to give it depth:

/* Lowercase t in a box. Similar to the twitter logo. */
.twitter-icon {
  font-family: monospace;
  font-weight: bold;
  font-size: 24px;
  text-shadow: 1px 1px #aaa;

  width: 20px;
  height: 22px;
  padding: 1px 0px 0px 4px;
}

The Google+ icon is very similar, but with overflow: hidden to make the text out of the box dissappear:

/* g+ text overflowing from a box. Similar to the Google+ icon. */
.gplus-icon {
  font-family: times, serif;
  font-size: 27px;
  text-shadow: 1px 1px #aaa;

  /* Cut the text outside of the box. */
  overflow: hidden;

  width: 24px;
  height: 23px;
}

The email icon has another twist, it uses a special Unicode character that represents an envelope. This trick is commonly used in many sites, for example for zippys:

<span class="subscribe-icon email-icon">✉</span>

The CSS of the button is basically the same:

/* Unicode envelope character inside of a box. */
.email-icon {
  font-weight: 600;
  font-size: 23px;

  width: 20px;
  height: 18px;
  padding: 3px 2px 2px 2px;
}

Finally, the RSS button, which is the most complex one. The waves are made as circles, in which the left and bottom parts are hidden. It has 5 parts:

• The outside button, which similar to the other 3 buttons
• The dot at the bottom left
• A top right quadrant of a circle, in small size
• Another quadrant, but a little bit bigger
• Most importantly, a container box for the circles, which hides the rest of the objects and allows to see only one quadrant

This is the HTML:

<a href="/blog/rss.xml">
  <span class="subscribe-icon rss-icon">
    <span class="rss-icon-dot">.</span>
    <span class="rss-icon-container">
      <span class="rss-icon-small-wave"> </span>
      <span class="rss-icon-big-wave"> </span>
    </span>
  </span>
</a>

And the CSS:

/* Outer box for the RSS icon. */
.rss-icon {
  width: 22px;
  height: 23px;
  padding-left: 2px;
}

/* The dot at the bottom left of the RSS icon. */
.rss-icon-dot {
  font-family: times, serif;
  font-size: 36px;

  position: relative;
  left: -1px;
  top: -3px;
}

/* Container that marks the borders of the RSS icon waves. */
.rss-icon-container {
  display: block;
  width: 20px;
  height: 20px;

  /* Show only one quadrant. Hide the rest of the circle. */
  overflow: hidden;

  position: relative;
  left: 1px;
  top: -29px;
}

/* The small wave at the right of the icon. Only one quadrant. */
.rss-icon-small-wave {
  display: block;
  width: 16px;
  height: 16px;

  border-style: solid;
  border-width: 3px 3px 0px 0px;
  border-radius: 50%;
  border-color: #eee;

  position: relative;
  left: -8px;
  top: 9px;
}

/* The big wave at the right of the icon. Only one quadrant. */
.rss-icon-big-wave {
  display: block;
  width: 28px;
  height: 28px;

  border-style: solid;
  border-width: 3px 3px 0px 0px;
  border-radius: 50%;
  border-color: #eee;

  position: relative;
  left: -14px;
  top: -15px;
}

As the end result, this is how the icons look like, made with just a few bytes of CSS:

I hope that was useful. If you have a website check out what icons you can convert to CSS. And if you liked the post, don’t forget to share using the Google+ button.