Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Icon fonts are a fast, effective way to feature scalable vector artwork on websites. James Williamson shows you how to properly deploy icon fonts on your own site in this short course. Learn how to find an icon font that's right for you and style it so it appears exactly the way you want. Then learn about deployment options that will make your icons accessible and display consistently across multiple browsers and devices. James also introduces advanced styling options such as animated and multicolored glyphs.
Want to create your own icon fonts? Check out James' companion course, Creating Icon Fonts for the Web.
Some of you watching this course might be curious about how icon fonts can help you with your own projects even though you might not be a 100% sure exactly what they are. Well icon fonts are simply another way of displaying icons in your applications and websites. In the past this task has falling largely to image formats like GIF and PNG. Although techniques like CSS Sprites have evolved to make this a little bit more efficient, using images for icons usually results in additional requests to the server, and image quality is likely to suffer if the icon is scaled.
To address this problem, designers have turned to, what is actually a very old solution, and that would be fonts. For as long as we've been building fonts we've been storing symbols inside of them. You're probably pretty familiar with the example I'm showing you here. This is the WingDings font, that has been around for a long, long time. But with the increase in support for web fonts, it was actually inevitable that once again we would start to look at serving symbols and icons through fonts. An icon font is exactly like a normal font. The only real difference is that in place of letters you will find symbols or icons.
And typically icons are mapped to specific letters, symbols, or characters. Each icon font is different, and the strategy employed to map icons to specific characters will largely dictate how you use it. If for example, an icon is mapped to a specific character like the example you see here, all you really need to do in order to display the icon is type the appropriate letter and then choose the icon font as it's font family. It's a little more common however, to find icons mapped to specific Unicode characters that avoid using basic Latin characters.
These can be things like common symbol characters, or they can be part of what is known as the private use area of Unicode. Well, that's an area reserved for custom glyphs. This allows designers to use icon fonts without worrying about stray characters appearing on their pages if the icon font fails. How you actually use icon fonts is going to depend in large part to how the icon font was created. We'll talk more about that, in just a moment.
There are currently no FAQs about Deploying Icon Fonts for the Web.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.