About Icon fonts

About Icon fonts and CSS @font-face

Icon fonts are becoming increasingly popular and with everything new there are a few things you need to know. Icon fonts are a lightweight method to incorporate icon images in your web pages without any actual images. They offer resolution independent graphics. You can change the size and color easily, you can even add all kinds of nifty CSS stuff, such as shadow, opacity, transparency, rotation, gradients, textures and so forth.

 

CROSS-BROWSER COMPATIBILITY

• Internet Explorer supports EOT (and IE9 WOFF)
• Mozilla browsers support OTF, TTF (and FF3.6+ WOFF)
• Safari and Opera support OTF, TTF, SVG (and Safari5.1+, Opera11.10+ WOFF)
• Chrome supports TTF, SVG (and Chrome6.0+ WOFF)
• Mobile device browsers such as Safari want SVG only

WOFF (Web Open Font Format) is a font format, based on the SFNT file structure (TrueType and OpenType fonts) and specifically designed for Web use with the @font-face declaration. Embedded OpenType (.eot) is a font format similar to TrueType, but with modifications to make it usable on Web sites.

Note: in Firefox you may have to turn ON Web fonts usage. In Options > Content > (Fonts & Colors) Advanced you need to check "Allow pages to choose their own fonts, instead of my selections above" if it is not checked.

---

MAKING IT WORK

To make it all work you will first need a style definition such as:

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

The font-weight and font-style need to be set to 'normal' to ensure that all browsers default to the same values. This way you can apply a bold or other style in the CSS later. And as you can see you always need 4 versions of the font. The .eot, .woff, .ttf or .otf, and .svg.

To use the defined icon font in your Web pages add the stylesheet of the font:

1. Use @import url("css/myiconfont.css"); in your main stylesheet, or
2. Add the <link rel="stylesheet" href="css/myiconfont.css" type="text/css"> line to the Webpage that will use the icons.

To use a specific icon, there are several ways to include them in your HTML. Usually you can use a <span> or a <i> tag with a class definition that is named after the icon. With some fonts you can use any element such as div and so on.

For example:

1. <span class="icon-arrow-right"></span>  renders  
2. <i class="icon-arrow-down"></i>  renders  

For this to work the iconfont.css file needs to define all the names and their corresponding Unicode. For example:

[class^="icon-"], [class*=" icon-"] {
font-family: 'Myiconfont';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-list:before {
content: "\e200";
}
.icon--computer:before {
content: "\e301";
}

and so on for all the icons in the font.

Some icon fonts already include some nifty CSS transformations such as animation, shadow, gradient or even icon2x/3x. If not, you can always add such CSS styles if you're handy with CSS. Any additional classes can be included like this:

<span class="icon-user gradient icon2x"></span>

---

THE SIMPLYTHEBEST ICON FONTS KIT

When you download an icon font from SimplytheBest Fonts, you will get all the necessary font files in a compressed ZIP archive with:

• TrueType Fonts (OTF or TTF) for Firefox 3.5+, Opera 10+, Safari 3.1+, Chrome 4.0+
• EOT fonts for IE4 up to IE8
• WOFF fonts for Firefox 3.6+, Internet Explorer 9+, Chrome 5+
• SVG fonts for iPad, iPhone and Android 3.0+
• A icon definition stylesheet to link to in one of the above mentioned methods.

---

CONSTRUCT YOUR OWN ICON FONT

If you want a different set of icons in the icon font you intend to use, you can use one of the following:

  IcoMoon

Build your own icon font based on what is already available on the site or add SVG icons or SVG fonts of your own choosing. Once you have selected all the icons you want, you can build the font files and download them.

Readily available are: IcoMoon - Free, Linecons, Octicons, Broccolidry, 60 Vicons, Steadysets, Entypo+, Feather, Eco Ico, Font Awesome, Material Design Icons, Typicons, Brankic 1979, Eighty Shades, Meteocons, wpzoom, Iconic, Elegant Themes - Line Icons, BigMug Icons, AlphaNum16, and AlphaNum20.

  Fontello

Build your own icon font based on what is already available on the site or add SVG icons or SVG fonts of your own choosing. Once you have selected all the icons you want, you can build the font files and download them.

Readily available are: Fontelico, Font Awesome, Entypo, Typicons, Iconic, Modern Pictograms, Meteocons, MFG Labs, Maki, Zocial, Brandico, Elusive, Linecons, and Web Symbols.

---

Browse some great icon fonts here:

  SimplytheBest Icon Fonts

---