SEARCH
  Tutorials HTML and CSS Articles What Is @fontface for Icons and Why Should You Care?

What Is @fontface for Icons and Why Should You Care?

StacySummers Articles Jun 07, 2012

Are you ready to get acquainted with the new trend in the web world? In any case you have no choice cause sooner or later you'll come up with this innovation. So why not do it right now?

Today I want to introduce you a relatively new approach in icon implementation that will be a mainstream feature in a while. I'm talking about the @fontface for icons that closely intersects with the term " IconFont" ( this font set contains graphical icons). Nowadays you can embed a font that comes with various icons required by your UI, at the same time the icon is inserted and treated as a text. Isn't it great?

Pros and Cons

Using @fontface for icons has an endless number of advantages. Let's try to list the major ones.

  • You can easily change the size and color of these icons, moreover, you can apply any CSS style
  • You need only one Http request for all icons
  • You don't need to use any difficult tricks to adjust icons (no sprites or juggling of images)
  • Good cross-browser compatibility ( even for IE6!!!!)
  • Amazing look

But not everything is so perfect as it may seem.

  • Font characters are single-color ( but you can change something with the help of CSS3)
  • Fonts generation is not an easy task ( more harder than PNG and SVG generation)
  • No free licensed standard fonts

Look at the demonstration of the Web Icon Font: Icon Font Demonstration

One more example how you can easily customize Icon Fonts. Just click on the link! Icon Fonts are Awesome

How to use?

It is very simple to use Webfont Icons! First of all you should download the Icon font that you're interested in. Below you can find a showcase of more than 20 Icon fonts.

The next step you should do is to generate a zip file with your font and CSS using @Font-Face Generator at fontsquirrel.com.

Webfonts are supported by almost all browsers but not all in the same way. If you want to be friendly with all browsers, you should include your font in different formats: TTF, WOFF, EOT and SVG.

  1. @font-face {
  2. font-family: "YourFont";
  3. src: url("your_font.eot");
  4. src: url("your_font.woff") format("woff"),
  5. url("your_font.ttf") format("truetype"),
  6. url("your_font.otf") format("opentype"),
  7. url("your_font.svg#iconic") format("svg");
  8. }

Now it is time to work with the HTML file. I propose you to use such code:

1. <a name='home' class="[set-name]"></a> Home

But you can customize it in the way you like or need. Also, you can use CSS style!

.[set-name]:before {
   font-family: "YourFont";  
content: '!';
}

Make your own IconFont!

I've found a cool detailed guide on how to create your own IconFont. Also in this article the author gives us a useful material about science behind making successful UI icons. So you definitely should visit it!

If you are lazy (be honest - all we are lazy to some extent) you can use the Pictos Server to create your own font in a simple way. One thing you should do it is to choose any icon you need in the Pictos Library and assign a keyboard shortcut that will correspond with that icon. This service is free for the first 10 days, so why not to try it? :)

More materials:
Making an Icon Font
How To Make Your Own Symbol Font
Ever Thought About Using @Font-face for Icons?

The collection of IconFonts

As I've promised before, here I'll show you cool examples of Webfont Icons. Most of them are free to download. So do not hesitate and try to use them in your own projects.

SnowCone

This is a set of icons designed by Tangent Snowball team. Each icon could be added without any additional HTML markup.

Iconic

This set contain 171 marks in raster, vector and font formats. Icons are easy and flexible to work with. If you want to create your PNG , SVG or font file, Iconic is a great solution for you, because it comes with JSX and Python scripts.

Foundation Icon Fonts, FTW!

As you already guessed this icons can be any size, any color and with any CSS style.

Entypo

Entypo is a set of more than 100+ pictograms. I'm sure, here you will find all you need.

Signify Lite: Free Icon Font

With this font you have 38 beautiful, hand-crafted icons at your disposal for any use.

IcoMoon

This set consist of 622 vector icons. Supported in IE (6+), iOS Devices, Android, Chrome, Firefox, Opera, Safari.

Socialico

This is a package of 74 social media icons, designed by Jelio Dimitrov a.k.a. Arsek. This icons have stunning look and they are easy and comfortable in usage.

Raphael Icon Set via @font face

This collection comes with more than 110 pictograms. And because the icons are just text you can do all the fancy CSS3 stuff with them

Fico

Look at this collection of 52 simple, easily adjustable pictograms. They are universal and stunning in the same time.

Pictos

Adorable minimal style of this icons is a trend nowadays!

Peculiar

Take a look at this free icon package which contains 45 pictograms. Browsers supported: Internet Explorer 9, Mozilla Firefox, Camino, Opera, Apple Safari , Google Chrome or any other Gecko or WebKit powered browser.

CSS Icon Font Buttons

Browser support is excellent - working in all modern browsers all the way back to IE8.

iconSweets

Look at this huge collection of icons(more than 1.000). You can use them on iPhone, iPad & Android apps or new web projects!

JustVector Social Icons Font

Pictogramz

Dot Com Font

Web Icon System

Glyphyx

Symbol Signs

Modern Pictograms

Free Icon Font Pack

Today, in the times of responsive templates and mobile devices the ability of easy and fast size customization is a very important feature. And @fontface for icon is a cool solution! (please, don't say me anything about SVG, there are many problems with its supporting by some browsers).

Using fonts for icons... is a good idea, I'm telling you.

ABOUT THE AUTHOR

Stacy Summers

Hello, I'm Stacy Summers. I want to show you amazing web things and hope you will love them just like me. If you have any questions, please contact me via email (webwdl@gmail.com) or visit my Facebook page.

subscribe to newsletter