Replace Your Button’s Raster Icons for Font Icons


When we use raster icons on our buttons, such as a 16 x 16 PNG graphic of an Export icon, the size may be right for a small handheld device. But when the same page is viewed in a larger device that scales up the images, the icon will look less than its best. Of course, we can use larger icons to begin with and let them scale up or down, but there is a better way.

Our best bet is to use font icons. That is, fonts that are not letters, but come in the shape of familiar icons. Fonts resize to any size and still retain their sharpness. Their storage size is lighter than raster icons. If we use a font in place of a small icon, it will remain crisp no matter the resolution or size of the device. Who knows what larger resolutions and pixel densities are coming up in the future?

Here is how to add font icons to a button.

1. Download the font icons from your source. For this post, I used the free Heydings font icons from http://www.dafont.com/heydings-icons.font. You might also look at Sosa: http://www.tenbytwenty.com/sosa.php

2. Uncompress the files and put them in a folder with your HTML files. You’ll see that the fonts come in a variety of types for different browsers.

3. Reference the fonts in your external stylesheet, which we’ll call font_icon.css:

@font-face {
font-family: ‘HeydingsCommonIconsRegular’;
src: url(‘heydings_icons-webfont.eot’);
src: url(‘heydings_icons-webfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘heydings_icons-webfont.woff’) format(‘woff’),
url(‘heydings_icons-webfont.ttf’) format(‘truetype’),
url(‘heydings_icons-webfont.svg#HeydingsCommonIconsRegular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

4. Remember to link to the external stylesheet from between your HTML document’s <head></head> tags:

<link rel=”stylesheet” href=”font_icon.css” type=”text/css” charset=”utf-8″>

5. Type out the entire alphabet, with uppercase, lowercase, numbers, and punctuation to see which symbol has been allocated to each key. Wrap it with the <h1></h1> tags. (Instead of doing this exercise, you can look at the Heyding mapping here: http://www.dafont.com/heydings-icons.font)

<h1>
AaBbCcDd
<hr>EeFfGgHhIi
<hr>JjKkLlMmNn
<hr>OoPpQqRrSs
<hr>TtUuVvWwXx
<hr>YyZz
<hr>1234567890
<hr>`-=[]\;’,./
<hr>~!@#$%^&*()_+{}|:”<>?
</h1>

6. Format the <h1> tags for the above:

h1 { font: 30px ‘HeydingsCommonIconsRegular’; letter-spacing: 0; color: red; }

View it in a browser. Based on what I saw on the screen, I need to use a capital E in the button’s value=”” space to place the envelope, a common symbol for Export, in the button.

7. Create your button:

<input class=”buttonWithIcon” type=”button” value=”E”> <!– E for Envelope –>

8. The magic happens when we format the button with CSS and include the font name, color, and size. This is for a white icon on a black button.

input.buttonWithIcon {
height: 40px; width: 150px;
border: 3px solid #666; background-color: #000;
font: 1.5em ‘HeydingsCommonIconsRegular’; color: #fff;
letter-spacing: 0;
padding-bottom: .3em; // padding-bottom centers this font vertically
}

9. Review your work in the browser and adjust as neede:

Twitter Bootstrap has its own font icon set:
http://fortawesome.github.com/Font-Awesome/

The Zurb Foundation produced its own custom font sets:
http://www.zurb.com/playground/foundation-icons

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s