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.
Deploying icon fonts in your projects is not always a straight forward process. Not all icon fonts are created the same, and because of this, you'll have to know certain things about your icon font before you start to use it. The main thing you have to understand is how the font is encoded. When an icon font is created, icon are stored within glyphs and encoded to specific Unicode characters. Think of it this way, if you took a font like, say, Verdana and removed the artwork for the j character and replaced it with an icon.
Well, that means that any time somebody typed in a j and used the Verdana font, they'd see an icon instead. So, in order to use an icon font, you have to know where the icons are stored inside of it. A growing trend among icon fonts is to store icons within what is known as the private use area. Now, this is an area of the Unicode standard that's set aside for custom glyphs. Of course, this isn't the only encoding strategy for icon fonts. So, I'm going to show you four use cases for icon fonts, so you can get a feel for how different ones are produced and then deployed.
Now, I want to start with a font that's typically, I guess not really an icon font, but it kind of is. This is the Erler Dingbats font, and this is one of my favorite creations ever. It builds itself as the world's first complete Unicode dingbats font. Essentially, if you remember earlier in the title, I was showing you those Wingding characters. You're probably familiar with them. Here, let me scroll down and show you what I'm talking about. So, you know, you got different hands. Their point was, it's a collection of symbols that have nothing to do with each other. Stylistically, they're all different from each other. They don't look the same.
Yes, you're going to get a number or you're going to get a heart or you're going to get an airplane but there's just no consistency. So, they sat down to number one, modernize the font a little bit and then draw consistent icons that are going to look the same and like they belong together. And so, it's really, really cool. Now, here's the thing. What they did is they took all these icons, because let's face it, that's what they are. And then they encoded them to the actual symbol encoding in the Unicode standard. What that means, basically, is where the star symbol usually sits within a font, that's where these were encoded to.
Just like the wingdings font. So, although people don't call that typically an icon font this is a strategy that's gaining in popularity. If you have an icon within your icon font. That is a common symbol. It's becoming common to see people actually map them to those standard characters. That way, for example, if your mail icon fails, because your icon font maybe didn't load, then at least you would get the fallback mail symbol, if it was available. So, this is definitely one that you want to check out. Plus, it's a free download, and it's a great font, so I encourage you to take a look at how they constructed this one.
Now, they work great and they take a lot of work off your shoulders. All you do is link to the dependencies, use the specific class, you get the icon. They even have built-in animations. So, it's a really neat solution. However, it's constructed in a way that some designers are going to find limiting because, instead of just having an icon font that you can just kind of go do what you want to with, you sort of have it designed within the constraints of the system. And that's kind of a byproduct of it being part of a framework. Now, there are plenty of places where you can go download Font Awesome all by, all on it's own.
And then use it how you want. But just understand that there are some icon fonts, out there, like this that are actually part of a larger package. Now, there are other icon fonts like my favorite icon font and that would be iconic. This was designed by the really talented P.J. Onori and this is just an open source icon font, and there's a lot of them out there. To use these, you go to their GitHub page or their repository or wherever they have them, you download them, and then you begin using them. Typically, these fonts are going to be the ones that are encoded to private use areas or reserved symbols.
Now, most of them are going to have a cheat sheet that tell you what character encoding for each symbol. But some of them don't. And on those, I've either had to open them up in a font editing software or just kind of hunt and peck until I find them or find somebody else that's used them and look at their files. So, when you use an open source icon font, understand, number one it's free which is great but number two, there might not be the clearest instructions in the world in terms of how to deploy it. Now finally, there are a lot of services out there like this one. This is Fontello. Another very popular one would be IcoMoon.
And, what's great about these guys, is they allow you to create your own custom icon fonts. Typically, from a lot of existing sets. You can see, for example, that Font Awesome is available, right here, on Fontello. So, you could load up all of the glyphs inside Font Awesome, and then download them as your own custom icon file. You could also mix and match icons. So, you could take a couple from Font Awesome, take a couple from Entypo, you can even upload your own artwork. So, what's really interesting about these types of services, is that you control the whole process. You're going to build the font to your specifications.
It's going to have the icons you want in it. You can even have some of your icons. And then, as you build the font, you choose how the encoding is done. You're more in control of it. So, those aren't the only ways that icon fonts are encoded and deployed. This should give you a pretty good idea, however, as to the amount of diversity that you're going to find in various icon fonts in terms of how they're constructed and deployed. Now, what that means for you is that choosing an icon font should not only be based on design and style, but also on how the font is constructed.
And whether or not it matches your deployment strategy.
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.