CSS3 using fonts to implement icon icons

Everyone knows that browsers now support CSS3 custom fonts (@font-face), including IE6 support, except that their support for font file formats is different. So for the various icons used in the site, we can try to use the font to implement, this article will explain in detail this usage

Why do you want to make the icon font?

In many web site projects, we often use a variety of transparent small icons, and then the site to be compatible with each browser, there may be multiple sizes, and even consider the need for skin changes. Then we are going to export these small icons to a variety of sizes, colors and file formats, such as Png8 alpha Transparent or PNG8 index transparency.

For example, Twitter uses a variety of small icons:

In this case, the use of fonts to implement the icon has many advantages:

Font file small, general 20-50kb; Easy to edit and maintain, size and color can be controlled by CSS, transparent fully compatible with IE6; how do I turn icon into a font?

The key is that the icon in the design (to have a vector path, bitmap can not be converted) is perfectly restored to the font, which is not very troublesome.

We want to use some font editing software, such as Fontcreator, FontLab, etc., here we use FontLab to demonstrate.

The restore step is simple:

Psd–>eps–>fontlab, convert the PSD to Illustrator's EPS format, and then copy a character into the FontLab.

Specific steps:

Open the design psd and save it as Photoshop EPS format, here is an example of the expression icon in Qzone that says the box:

Open the saved EPS file in Illustrator:

Ungroup, then click an icon to copy.

Open FontLab, open a font file, such as Tahoma.ttf:

Then double-click a character, delete the original graphic, and paste the icon object you just copied:

To resize the graphic, an icon completes the restore.

It's that simple. After all icons have been restored, a font file is generated.

To view the font character, in the Font list, right-click the property (shortcut key Alt+enter) on a font to see the character that corresponds to the font:

You can see that the font corresponding to the character is I,unicode encoded is 0069.

Browser support for font format:

Currently, each browser's support for font formatting is the biggest difference:

Webkit/safari: Supports Truetype/opentype (. ttf), OpenType PS (. OTf), ios4.2+ support. Ttf,ios 4.2 The following only supports SVG fonts; Chrome: Except for WebKit support, Starting with chrome 6, support for the Woff format, Firefox: Supports. ttf and. OTF, supports woff format from Firefox 3.6, Opera: Supports. ttf,. OTF,. svg. Woff not yet supported Opera 11 began to support Woff (thanks to apostle); IE: only support EOT format, IE9 start to support Woff.

Note: The above information is from: Webfonts.info

Note: Woff is the latest web open fonts format (Web open font formats), the main advantage is optimized for browsers, font files are small. See Wiki for details:

Use the icon font in CSS:

First use Font-face to declare the font:

The code is as follows:

@font-face {font-family: ' emotion '; Src:url (' Emotion.eot ');/* ie9*/src:url (' Emotion.eot? #iefix ') format (' Embedded-opentype '),/* IE6-IE8 */url (' emotion.woff ') format (' Woff '),/* Chrome, Firefox */url (' Emotion.ttf ') format (' TrueType '),/* Chrome, Firefox, Opera, Safari, Android, IOS 4.2+*/url (' emotion.svg#svgfontname ') format (' SVG '); /* IOS 4.1-*/}

Then, it would be nice to use the font on the icon element:

The code is as follows:

. icon{font-family: "Emotion" Tahoma;
...
}

Finally, use this font in the page:

The code is as follows:

<span class= "icon" >i</span>

Support CSS3 Browser can be a little bit higher, we may not be so convenient to modify HTML each time, if you want to change an icon, you may need to modify the relevant characters, such as to change I to E and so on. If you use the pseudo-elements of CSS3, it can be a lot easier:

The code is as follows:

. icon{Display:inline-block; width:16px; height:16px;/* occupies **/...}. icon:after,.icon::after{font-family: "Emotion" Tahoma; Display:inline-block; Content: "I";/* Call the character here */width:16px; height:16px; Margin-left:-16px;/*position:absolute What can also, see the specific situation * *}

Well, just using the actual element placeholder, displaying the icon with the pseudo-element +content attribute, then overwriting the actual element, and then modifying an icon only needs to change the CSS style.

IE is still tricky:
Since IE9 previously only supported the EOT format, the TTF needs to be converted to EOT, where Microsoft's official weft software can be used, and some online tools can be used:
http://www.kirsle.net/wizards/ttf2eot.cgi Online convert TTF to EOT format;
Http://www.fontsquirrel.com/fontface/generator powerful online TTF for EOT, Woff and other font formats
In addition, the EOT file must be added to the domain name whitelist before it can be used, it is recommended to use CREATEMYEOT:

Summary:
In fact, this method has a disadvantage, that is, only support solid color icon, up to the high-end browser to achieve gradient color or graphics mask.
Of course, we have a lot of scenes with solid color icon, especially when the Metro UI in Windows 8 is starting to get more and more.
In addition, this method can effectively reduce the page request, but for the habit of using the Cssgaga Auto Sprite function of the students, this method of the page performance is not improved.
But for mobile terminals, especially in WebApp, this method still has a great application, can be easily compatible with multi-resolution, with offline storage effect is better.
If you have better suggestions and comments on this, welcome.

"Recommended"

1. CSS3 Free Video Tutorial

2. CSS3 Example of filter effect implementation

3. CSS3 setting an instance of the RGB color

4. Tutorial showing an example of hiding a div with CSS3

5. CSS3 Making mouse button effect