Icon fonts are fonts that contain symbols and glyphs instead of letters or numbers. They’re popular for web designers since you can style them with CSS the same way as regular text. Also, since they’re vectors they’re easily scalable. They’re small, so they load quickly and (bonus!) they’re supported in all browsers.
Usually, icon fonts are only one color and they’re made to follow a grid, like 16px by 16px or 32x32. Any CSS3 effect looks pretty good on a retina display. Icon fonts are super easy to manipulate with CSS3. It’s extremely simple to have a text render a different size for different viewport sizes, but it’s much more difficult to resize images.
It’s also simple to change their color or add a shadow to an icon font's shape. There are a few downfalls to using icon fonts. For one, while you can change their color, you can't use more than one color. Simple, clean, monochromatic designs are popular right now, so that's not a huge issue, but it's still something to be aware of. The other issue is accessibility. While it's pretty simple to make the font icons accessible by putting them in the aria class, it's something that should be remembered. You can get icon fonts from a bunch of different places. You're to use these fonts on your site through the CSS declaration @font-face.
There are popular ones:
Font Awesome
It is free and open source. It was originally designed to work with Bootstrap, but it works well with all frameworks. To use Font Awesome icons, you’ll have to use @fontface and put them inside a <span> or <i> element and then assign them classes.
<span class="fa fa-sun"></span>
The output will be ☼
Something that's pretty great about Font Awesome is that since it's completely open source, there's a lot of support and constant updating. There are a bunch of different ways that you can get the Font Awesome icons on your site.
IcoMoon
IcoMoon offers both free and premium fonts. The free ones are open-source, and the premium fonts are paid. IcoMoon also has a web app that makes it possible for you to generate your own font by choosing only the icons that you want. You can even add your own icons to this app that will be included in the font that's produced through their web app. After you've chosen your icons, IcoMoon will give you an HTML file that shows you exactly how to use your font icon!
Entypo is also included as one of the fonts to choose from on IcoMoon. IcoMoon is a fantastic tool to be able to include only the icons that you want on your site. If you're including fewer icons, your page will load faster.
Pro Tip:Importing your own vectors
You can import your own SVG images or SVG fonts to the IcoMoon app.
If you import an SVG font, the glyphs in the font will get extracted and imported.
Before generating the font, IcoMoon gives you the ability to edit all information and structure every item:
Pro Tip:Using Inline SVGs
When you download your icon pack from the SVG tab in the IcoMoon app, it comes with a demo.html file that contains SVG icon definitions on top of the document, below
and inside SVG's element. These icons can be referenced and used as inline SVGs like so:
We should be aware of some pros & cons of Icon Fonts
No good fallback - Flash of Unstyled Content (FOUC)
The thing that you have to watch out for is there’s no good fallback. So, if the web font doesn’t load, there’s just nothing there. Anyway, the IcoMoon gives the ability to cover that with glyphs that have supported by all browsers.
Accessibility
Icon fonts are notoriously bad for accessibility and can lead to some frustrating experiences for those who rely on assistive technologies.
Treated like text — The browser treats fonts like text because that is what fonts are supposed to be. Screen readers have become increasingly smarter over the years, but they still have a hard time discerning what is legible text and what is a pictogram. Most screen readers will read aloud text inserted via CSS, so when they come across your icons they may say "unpronounceable," or they may be skipped entirely.
Stylesheet overrides — Those with visual impairments often use custom stylesheets to override the default styles of the websites they visit to make them easier to use. This might include changing color schemes, increasing font size or weight, or even changing the font face completely. If your site relies on icons in a non-contextual way, someone using an assistive font (e.g. OpenDyslexic) will cause your icons to be replaced and disappear completely, potentially leaving your website unusable.
Cannot provide metadata — The process of implementing an icon font on the web requires the use of the ::before or ::after pseudo-elements. Semantically, the ::beforeand ::after pseudo-elements are meant to add cosmetic content to an existing element. For icon fonts, this makes sense as long as the icon is being used contextually with another element. However, there are many times in which an icon is used as the primary focus. For example, an "x" for "close" or a house for returning "home". By themselves, these icons don't provide any semantical information about their contents; You cannot label them or describe them directly.
Difficult to Style/Position
Icon fonts are fonts first and icons second. This means that your icons follow text-based CSS rules, such as font-size, letter-spacing, line-height, etc. This can make positioning icons more difficult and less consistent. Additionally, icon font glyphs are monochromatic, meaning any stylistic changes you make affect the entire glyph.
Description
Icon fonts are fonts that contain symbols and glyphs instead of letters or numbers. They’re popular for web designers since you can style them with CSS the same way as regular text. Also, since they’re vectors they’re easily scalable. They’re small, so they load quickly and (bonus!) they’re supported in all browsers.
Usually, icon fonts are only one color and they’re made to follow a grid, like 16px by 16px or 32x32. Any CSS3 effect looks pretty good on a retina display. Icon fonts are super easy to manipulate with CSS3. It’s extremely simple to have a text render a different size for different viewport sizes, but it’s much more difficult to resize images.
It’s also simple to change their color or add a shadow to an icon font's shape. There are a few downfalls to using icon fonts. For one, while you can change their color, you can't use more than one color. Simple, clean, monochromatic designs are popular right now, so that's not a huge issue, but it's still something to be aware of. The other issue is accessibility. While it's pretty simple to make the font icons accessible by putting them in the aria class, it's something that should be remembered. You can get icon fonts from a bunch of different places. You're to use these fonts on your site through the CSS declaration
@font-face.There are popular ones:
@fontfaceand put them inside a<span>or<i>element and then assign them classes.The output will be ☼
Something that's pretty great about Font Awesome is that since it's completely open source, there's a lot of support and constant updating. There are a bunch of different ways that you can get the Font Awesome icons on your site.
Entypo is also included as one of the fonts to choose from on IcoMoon. IcoMoon is a fantastic tool to be able to include only the icons that you want on your site. If you're including fewer icons, your page will load faster.
Pro Tip:Importing your own vectors You can import your own SVG images or SVG fonts to the IcoMoon app. If you import an SVG font, the glyphs in the font will get extracted and imported.Before generating the font, IcoMoon gives you the ability to edit all information and structure every item:
and inside SVG'sPro Tip:Using Inline SVGs When you download your icon pack from the SVG tab in the IcoMoon app, it comes with a demo.html file that contains SVG icon definitions on top of the document, belowIn the example above, we are embedding symbol definitions in the HTML itself. This works fine in all modern browsers as well as IE 9+.
It is also possible to link to an external SVG containing the definitions:
There are also other useful tools:
Additional
We should be aware of some pros & cons of Icon Fonts
The thing that you have to watch out for is there’s no good fallback. So, if the web font doesn’t load, there’s just nothing there. Anyway, the IcoMoon gives the ability to cover that with glyphs that have supported by all browsers.
Icon fonts are notoriously bad for accessibility and can lead to some frustrating experiences for those who rely on assistive technologies.
Treated like text — The browser treats fonts like text because that is what fonts are supposed to be. Screen readers have become increasingly smarter over the years, but they still have a hard time discerning what is legible text and what is a pictogram. Most screen readers will read aloud text inserted via CSS, so when they come across your icons they may say "unpronounceable," or they may be skipped entirely.
Stylesheet overrides — Those with visual impairments often use custom stylesheets to override the default styles of the websites they visit to make them easier to use. This might include changing color schemes, increasing font size or weight, or even changing the font face completely. If your site relies on icons in a non-contextual way, someone using an assistive font (e.g. OpenDyslexic) will cause your icons to be replaced and disappear completely, potentially leaving your website unusable.
Cannot provide metadata — The process of implementing an icon font on the web requires the use of the
::beforeor::afterpseudo-elements. Semantically, the::beforeand ::afterpseudo-elements are meant to add cosmetic content to an existing element. For icon fonts, this makes sense as long as the icon is being used contextually with another element. However, there are many times in which an icon is used as the primary focus. For example, an "x" for "close" or a house for returning "home". By themselves, these icons don't provide any semantical information about their contents; You cannot label them or describe them directly.font-size,letter-spacing,line-height, etc. This can make positioning icons more difficult and less consistent. Additionally, icon font glyphs are monochromatic, meaning any stylistic changes you make affect the entire glyph.