Ecommerce free font icons

The Case for Icon Fonts: A 3 Step Tutorial

As part of our “spam the internet to death with images that don’t suck” mission, we recently published a series of e-commerce icons for free.

You’ll see that we are giving away two versions as images for you to implement them the old way (they’ll look great on your Myspace page) as well as in a font. Some designers have gotten on board with the @fontface revolution, which is great, but there’s still a lot of room to climb higher and replace your static images with icon fonts.

Why have icons in a font?

a) Each icon can easily be styled in different contexts and states with css.

Let’s say you need an icon in multiple places in different colors, sizes or with or without drop shadow. If the icon happens to be a link, you will also design different states for it, like a hover or an active state. It’s not news to say it’s much quicker and easier to do and to maintain by using CSS.

b) Fonts are vectors, they will never look pixelated on screens with a higher resolution.

Especially with the growth of mobile and tablets for online usage, many devices are using a retina solution. A font icon will automatically scale to any size without loss. That means there is no need for creating extra images with a higher resolution that you would have to incorporate into your mobile stylesheets.

c) The file sizes are small.

Our icon font is around 11 kb right now. The more icons are added in the font, the bigger the file size. Right now there are 32 icons that only take about 11 kb depending on the format. Smaller file sizes result in faster site speed.

So how do we do this the right way?

Step 1: Download the font files from our free imagery directory.

Step 2: Add the following lines at the top of your CSS file so the font files get pulled (make sure to use the right file path):

@font-face {

font-family: ‘sa_ecommerce-webfont’;

src: url(‘sa_ecommerce-webfont.eot’);

src: url(‘sa_ecommerce-webfont.eot?#iefix’) format(’embedded-opentype’),

url(‘sa_ecommerce-webfont.woff’) format(‘woff’),

url(‘sa_ecommerce-webfont.ttf’) format(‘truetype’),

url(‘sa_ecommerce-webfont.svg#webfont’) format(‘svg’);

}

If you are interested in learning why you need four different file formats, check which browser supports which format.

Step 3: Add an icon. 

Check the overview (include image: http://blog.sumall.com/wp-content/uploads/2014/03/glyph-key.png) and get the unicode that corresponds with the icon you want to use. For example, e015 for the piggy bank with the coin in front of every headline h1.

glyph-key

All icons sit within the private use area of the font so that screen readers won’t read them out loud.

h1:before {

font-family: ‘sa_ecommerce-webfont’;

content:’\e015’;

/* add font size and color */

font-size: 48px;

color: #333;

}

All done!

If you wanted to use the icons for your print material, we’ve also included the .otf version of our e-commerce icon font in our package.

If you need more e-commerce icons, send Chris an e-mail with your request and we will make sure to include it in our next version.


Leave a Reply

Your email address will not be published. Required fields are marked *

]