Video: Understanding encoding

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.

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.

Understanding encoding

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 haveto 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 arestored within glyphs and encoded to specific Unicode characters.Think of it this way, if you took a font like, say, Verdanaand removed the artwork for the j character and replaced it with an icon.

Well, that means that any time somebody typed in aj and used the Verdana font, they'd see an icon instead.So, in order to use an icon font, you haveto know where the icons are stored inside of it.A growing trend among icon fonts is to storeicons within what is known as the private use area.Now, this is an area of theUnicode 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 youcan 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 thetitle, 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 symbolsthat 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 aheart 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 thendraw consistent icons that are going tolook 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 theseicons, 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 usuallysits within a font, that's where these were encoded to.

Just like the wingdings font.So, although people don't call that typically an iconfont 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 peopleactually map them to those standard characters.That way, for example, if your mail icon fails, because your icon font maybe didn'tload, 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 Iencourage you to take a look at how they constructed this one.

Now, there are a couple of fonts like this one, this is Font Awesome.This is kind of like the icon font for Bootstrap, basically.It was designed to work with Bootstrap, and they'vereleased it open source kind of on its own.Foundation, which is another framework, has their own icon font.Essentially, what these guys are is they are complete packages.And they've got a lot of dependencies and other things going along with them.So, instead of just downloading just thefont, you're also going to be downloading some CSSfiles, some JavaScript files, and they haveall these built-in classes, so that when youwant to display an icon, or a specific type of icon, you have to usea specific type of class, and you have to link out to all these dependencies.

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 tofind limiting because, instead of just having an icon font thatyou 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 cango 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, outthere, like this that are actually part of a larger package.Now, there are other icon fonts like myfavorite icon font and that would be iconic.This was designed by the really talented P.J. Onori and this is justan 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 orwherever they have them, you download them, and then you begin using them.Typically, these fonts are going to be the ones thatare encoded to private use areas or reserved symbols.

Now, most of them are going to have a cheatsheet that tell you what character encoding for each symbol.But some of them don't.And on those, I've either had to open themup in a font editing software or just kind ofhunt and peck until I find them or findsomebody 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 butnumber two, there might not be the clearest instructionsin 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 theyallow you to create your own custom icon fonts.Typically, from a lot of existing sets.You can see, for example, that FontAwesome is available, right here, on Fontello.So, you could load up all of the glyphs inside FontAwesome, 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, takea couple from Entypo, you can even upload your own artwork.So, what's really interesting about these types ofservices, 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 diversitythat you're going to find in various icon fontsin terms of how they're constructed and deployed.Now, what that means for you is that choosing an icon font should notonly be based on design and style, but also on how the font is constructed.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.

Already a member ?

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships.
Learn more

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.