New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Understanding encoding

From: Deploying Icon Fonts for the Web

Video: Understanding encoding

Deploying icon fonts in your projects is not always a straight forward process. Now, I want to start with a font that's typically, Now, there are other icon fonts like my

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.

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, 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've released 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 the font, you're also going to be downloading some CSS files, some JavaScript files, and they have all these built-in classes, so that when you want to display an icon, or a specific type of icon, you have to use a 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 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.

Show transcript

This video is part of

Image for Deploying Icon Fonts for the Web
Deploying Icon Fonts for the Web

21 video lessons · 1611 viewers

James Williamson
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold

Are you sure you want to delete this note?

No

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:

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:

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

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.