With @ font-face, you can upload icons (icons) not in the form of PNG or GIF, but embed the inside of the font and load it to the user through the @ font-face directive. CSS3 allows you to rotate such icons, add shadows or even animated effects with a smooth color change when you hover the mouse (previously this was possible only in Flash).

Here is an instruction on using the IconPack font set (.eot, .woff, .ttf, .svg) and loading icons using the pseudo-element :before and the span tag.


')

 <style> .staricon { font-family: 'IconPack'; } .staricon:before { content: 'a'; } .show { display:block; } .hide { display:none; } </style> <div class="staricon"> <span class="show">star</span> </div> 

If you think this method has a lot of advantages and can be recommended as a default way of displaying icons on the site, despite the shortcomings.

Benefits

Potentially much less HTTP requests
Downloading hundreds of small images can take much longer than a single large file. In some cases, this may lead to faster loading of the page (as the Finom habraouser correctly noted in the comments, sprites are used for this).

One icon, infinite sizes
Vector icons mean scaling. Forget icon_8x8.png, icon_16x16.png, icon_24x24.png, etc.

Clearer Icon Management System
Managing badges, where each has a bunch of options in different sizes and colors, can be a serious headache. With fonts, all colors / sizes are in one file.

Replacing icons with a single CSS line
All the talk about TypeKit and how easy it is to embed fonts, in the future can just go to the icons.

Special effects on CSS3
The aforementioned animated effects, smooth color changes on mouse hover and other effects can be an interesting technique for web design.

disadvantages

Fonts can be big
Complicated font is easy to pass for 90 KB. It’s hard to justify this size if you need one special badge.

No standards
If we assume that TypeKit should develop and sell icon sets, as they now offer embedded fonts, then you need to make a standard set of characters for the icons in the set, and also assign a stable sequence number to each icon. Otherwise, we will not be able to easily change one set of icons to another, as we now do with fonts.

Risk to spoil the design
Experiments with icons from fonts show how easy it is to screw up a design if you use this technique incorrectly.

Multicolored icons do not work
If you want to embed multicolored icons (for example, country flags), then disappointment awaits you: CSS3 allows you to use only simple gradients, but nothing more.

Not all browsers support
If the user's browser forcibly prohibits downloading fonts and uses only embedded fonts, then he will not see any icons at all.

via srd