Icons make everything look cooler, there’s some magical component to them that can really bring out a website. Visuals aside, using icons offer some great UX benefits as well, in many cases the user spots the icon before the word it represents. With the rising use/support of SVG we no longer have to worry about our icons looking choppy on a “retina screen”. Today I want to take you though the process of creating SVG+CSS icon buttons, with PNG fallbacks.
Let’s take a look at what we’ll be creating today. You can view these demos in action at the bottom of this page, but for future-proofing purposes, here’s a screenshot:
SVG has two major cons that we’ll have to find a solution for:
Support isn’t all there yet, theres no support below ie9 or on android 2.3.
Inline SVG’s are not cacheable.
For the second problem we’ll base64 encode our SVG icon. There’s around a 30% increase in size, but this will allow our SVG data to be cached in our CSS file. It’s worth the 30% since these buttons are displayed many places accross a website. In our case it’s a size difference of bytes.
Let’s start by creating our buttons without the icon. Here’s the HTML:
I’ve added a class to our UL so we can plug it in anywhere and not interfere with other style declarations. Let’s add some basic CSS styling.
Pretty simple, we set display: inline-block so our buttons won’t stretch across the page. We added a small margin to the right and bottom of our li. We also added padding to our <a> tags, and set a background/border color. Now that we have our basic styling, let’s add some CSS3 flash.
Here we added CSS3 gradients and a 3px border radius. We can also include support for older versions of Internet Explorer using MS-filter.
Here we added CSS3 gradients and a 3px border radius. We also included the MS-filter for IE 8-9 support.
Icon Creation In Illustrator
To create the icons needed, I just used Font Awesome, and Illustrator to create SVG/PNG’s. Why not use the font awesome web-font you ask? Two reasons:
Performance, font awesome is massive in size (a difference of over 50k’s in my case).
Icon fonts render horrible on windows. I like everything crisp on all platforms.
So anyway, let’s create these icons. Open up a fresh document in illustrator, size doesn’t matter, but set preview mode to PX so we have a better idea how the PNG’s will look.
Note: If you don’t have Illustrator I’ve included the all the images in the starter kit.
Set your color to #333333 and grab the text tool with font awesome. Type the icon you need. Font-size 20pt, seems about right.
Right-click create outlines.
Now go to object > artboards > fit artwork to bounds.
There we go, our first icon. Save it as an PNG, and as an SVG with decimal places set to 1.
Note: Inspect your images, PNG’s can only be in increments of a whole PXs, sometimes you’ll have to round your art board up to the nearest PX to avoid edge chopping. In our case it works out fine.
Repeat this process for all the icons you need. Now let’s incorporate them into our button.
This will test if SVG is supported, and append a class to <html>, either svg or no-svg. Cool. Now let’s add our icons to the buttons.
To have a unique icon on each button, we’ll need to add a unique class on each of our <a> tags.
Now let’s create some room for our icon. We’ll overwrite our default <a> styles with more specific selectors, so if we want a plain text button it doesn’t create problems. We also add background-repeat: no-repeat and some background positioning.
Now we have some room for our icons to fit, let’s create base64 encoded SVG background images. There’s a great tool to do this at b64.io. Just drag and drop the SVG files we created, and it will output the code. Be sure to add .svg before your class name. Here’s how mine looks.
Lets add our PNG fallbacks. Create the same selectors with the .no-svg class name this time:
Now open your nojs.css file and paste the same code without the .no-svg prefix. Why do we do this in a second CSS file wrapped in <noscript> tags you ask? Performance, if we set it in our main CSS file everyone would be loading two images. By doing it separate, Users will only load the image specific to their case. For example, JS-disabled user will ignore the rest since our JS test wont add .svg or .no-svg for them.
That about sums it up, I’m sure you’re aware you can set the buttons/icons to be any colors you want. Hope you enjoyed this tutorial, checkout the demos below.
Share this post
If found this post helpful be sure to share it with your friends!