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.
In this chapter we're going to take a look at some of your options and possible strategies for deploying icon fonts based on factors such as how the icon font was encoded. We're going to start with basic latin encoding, and so what basic latin encoding is is taking the normal character in a font, like l or a, taking that particular Unicode value and replacing it with an icon. Or building a font where you have icons in the place of where those characters would normally be. Just to show you an example of one of these here is the font that we are going to be using in this exercise.
So you can see we've got symbols mapped all the way from a to z we're only doing lower case here. A lot of people like this approach because they do things like c for calendar and d for document, e for edit and it becomes really easy for them to remember which icon they need to use by just using the letter. Of course, then you come to things like mail where m was already taken up by menu, so where do you put that? You run into some problems with that type of logic but there are a lot of older icon fonts out there that use basic Latin encoding.
Most of the icon fonts that are being created now use private use area or sort of reserved symbol encoding characters. But there are still some out there being built this way and there are certainly some older ones that are being built this way. So if you get one of those and you want to use them, how do we use them? Okay, so I have the Latin.htm file this is found in the 03_01 directory. This is the same file we were just looking at in our browser. If I scroll down I can see at the very bottom of the page down here I have a heading that says Using Basic Latin encoding, display the home icon and display the calendar icon.
So we know and looking at the font that the home icon is at h and the calendar icon is at c. So that's all we really need to display them. So going back into my code, I'm going to go to the home icon just type in an h, and then I'm going to go to the display the calendar icon, and I'm going to type in a c. I'll save that. Of course, if I were to look at this in the browser, you can see that there is an h and there's a c, but my icons aren't showing up. That's, of course, because I haven't actually told them to use the right font.
And the problem with this, obviously, is that they're in the middle of a paragraph. So, what I'm going to do is I'm going to go back and I'm going to wrap them in a span tag. So I'm go ahead and create a span tag. Yeah and let's just move the h over there. You think by now I would know how to do this a little better. All right, so span, and I'm just going to give this a class of icon. I like copying and pasting. So I'm going to copy and paste this down here. And I will replace h with a c that was much easier. So now by creating a generic class called icon, I'm surrounding these characters and I'm telling them, okay these are going to be icons now.
If I save this, go back out to the browser, no change whatsoever, well that's understandable because we haven't done anything yet. So I'm going to switch over to the CSS file, I'm going to scroll all the way down to the bottom. And rather than, force you to watch me type this, I'm going to paste in some code here. You can pause your video and type in the way that I've got here. But I'm going to explain what all of this stuff is doing. So I have a class selector called icon. And that of course is going to target the span tags that we just wrote in the HTML. We're assigning the font family of chunky_latin because up in the, here we are up here.
You can see the font face declaration is assigning a font name chunky_latin to it, meaning, the same font we've been using, just encoded in Latin characters. So chunky_latin. Font weight of 400. So after all this stuff, this is all the normalized styles that we were doing in the resolution controlling styles that we were doing earlier. And then I've got some discreet styling here. Font size, displayed as a block level character in line height, it's going to control how it displays. That doesn't have anything to do with the technique we're doing, just that it's going to make it look a little better hopefully.
So I'll save this. Let's go back in and test this in the browser. And sure enough as you can see, our home icon and our calendar icon are showing up. And all that was required is that we make sure that the browser knows that those letters should be displayed using that font. You know that is pretty easy. It's relatively effective, but I want to point out that it's really not the best solution for deploying icon fonts. You've got some accessibility concerns here because screen readers would read those letters regardless of what font they're displaying in. And if this icon font fails those icons are going to fall back to regular characters and that's going to look a little weird.
So in our next exercise I'm going to show you guys how to use generated content to deal with some of those issues.
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.