Deploying Icon Fonts for the Web
Illustration by John Hersey

Understanding encoding


From:

Deploying Icon Fonts for the Web

with James Williamson

Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now

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.
please wait ...
Watch the Online Video Course Deploying Icon Fonts for the Web
2h 4m Intermediate Apr 29, 2014

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.

Topics include:
  • Finding icon fonts
  • Ensuring consistent styling
  • Exploring class-based solutions for deployment
  • Deploying with the data-icon attribute
  • Aligning icons
  • Animating icons
  • Styling multicolored glyphs
Subject:
Web
Author:
James Williamson

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.

There are currently no FAQs about Deploying Icon Fonts for the Web.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

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.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

* Estimated file size

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Deploying Icon Fonts for the Web.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Exercise files

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

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

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:

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.