From the course: Creating Icon Fonts for the Web
What is an icon font?
I realize that some of you watching this course may have never used an icon font before. If you're new to them, you may be asking yourself, well, what exactly is an icon font, and what's the big deal about them? For you guys, I want to take a moment and give you a brief overview of what icon fonts are. And if you'd already been using them for a while, or if you're familiar with them, you should feel free to go ahead and skip this movie if you'd like. So icon fonts are simply another way of displaying icons in your applications and websites. In the past, this task has fallen largely to image formats like GIFs and PNGs, and then the image would just be displayed on the page. We've had some techniques evolve over the years, like CSS Sprites that make this process a little bit more efficient. But using images for icons usually results in additional requests to the server. And image quality is likely to suffer if the icon is scaled, because they're resolution dependent, which make them really bad for responsive design. So to address this problem, designers have turned to what is actually an older solution, fonts. For as long as we've been building fonts, we've been storing symbols inside of them. For example, you're probably pretty familiar with the font that I'm scrolling through now. This is Wingdings. It's been around for a long time. And you've probably used a couple of these symbols yourself one or two times at least. Well, with the increased support of web fonts in browsers, it was actually inevitable that somebody would eventually have the idea to start serving icons and symbols through fonts on the web. So an icon font is exactly like a normal font. And I'm going to switch over to the icon font that you guys will be building in this course, so you can kind of see what we're going to be doing. So an icon font, as I mentioned, is just exactly like a normal font. The only difference is, instead of a letter mapped to a character or a Unicode area, you'll have a symbol like this one. Now, each icon font is a little different, and the strategy employed to map icons to specific characters are going to dictate how that font is used. If, for example, an icon is mapped to a specific character like h here for home, for example, all that you'd need to do in order to display it is type the appropriate letter. And then make sure that in your CSS, that icon font is being used for its font family. It's actually more common to find icons mapped to specific Unicode characters that avoid using basic Latin characters. Now, these can be common symbol characters, or a part of what is known as the private use area of Unicode. You can see an example of that here. We have a paragraph with a class of icon-heart on it. And then in the CSS, we're using the before pseudo selector to say, hey, go ahead and display this particular character encoding, 2661, which, in this case, is the symbol for heart, so it would show the heart. Now, when you map these characters, it can be common symbol characters, like you're seeing here with this heart, or it can also be part in what is known as the private use area of Unicode. And that's an area that's reserved for custom glyphs, and that's what we're going to be using in this course, that allow designers to use icon fonts without worrying about straight characters appearing on their pages if the icon font fails. So, how you encode characters when creating your own icon font matters greatly. And we're going to discuss that in a lot more detail a little bit later on in this course.
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.