Start learning with our library of video tutorials taught by experts. Get started
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.
There are a lot of designers and systems out there that use a class based approach to displaying icon fonts, and there's certainly nothing wrong with that. Just like any other technique, they have a class-based approach has it's pros and it's cons. The cons are it's really tedious because you pretty much have to create an individual class for every single icon in your font, and if you have a large font like the junky mobile one has got over 93 glyphs inside of it, that's a lot of classes. Of course the benefit of that is that you can start to use classes that are intelligent, and are semantically named, meaning they actually mean something.
So if you have a Twitter icon, for example, Twitter could be part of your class name. And it's really easy to say, hey, I need the Twitter icon, so I'm just going to do icon dash Twitter, and it's done. So, there are a few things that you need to think about if you're going to establish some type of a class-based deployment. The first is you want to make sure you're not needlessly repeating code. If you're normalizing your icons, for example, you shouldn't be doing that in every single class definition because that's just adding a lot of bloat to your code that you don't need. The next thing is you want to make sure that it's flexible.
Meaning, if you have a lot of variations in your styling, it really ought to be pretty easy to just modify the class a little bit and achieve an entirely different look and feel for that. So I'm going to scroll down a little bit and show you guys one approach building a system just like that. So an example that I'm showing you we've got a universal selector that says hey, go out and take a look at all the elements in here, and of course, I wouldn't use the universal selector for this. I would probably isolate it and say, hey, only apply icons using spans, or things like that. So in this example it's saying, go out and find all the elements, and if there's anybody out there with a class attribute that contains icon.
So what you're seeing right here, this is, for those of you who have used these before, you know what I'm talking about. But if you have not used these before, these are attribute selectors. And attribute selectors are kind of like the hidden power of CSS. I love them. What they allow you to do, is look into an element, look at it's attribute, and then, assign styling based on the contents of the attribute or whether the attribute exists at all. So in this case we could say hey class, and then this little sort of star equals means the value of class.
Icon is contained somewhere in that value. Either at the beginning, either at the end, in the middle of it. Anywhere the word icon is found within the value class, it'll match this. And in this point we're declaring the font family, and then we're going to pass in our normalized code. So that means we're writing one selector. This is basically going to control the basic styling of all of the icons. Now below that, you can see that I have just an example here for one icon, the search icon in this instance. So a dash search, so we can use prefixes and suffixes to sort of chain these things together, and so by saying icon-search it would apply all of this styling because of icon.
And then the dash search would tell it to use this particular content, which in this case is mapped to the search character. That's really cool, and it's very flexible because by using this sort of an attribute selector, you can start to chain all sorts of things to it. Like, for example, in this one I'm saying dash big, go ahead and take that font size and move it up to 2M, so twice its current size. So, to apply that, I would simply go into My HTML and say class equals icon dash search, that's going to match these two, and then down here I add icon dash search dash big, which would map all three of these.
So, it can be a little tedious to set up but once it's set up it's extremely efficient to employ. So down below this we have our actual exercise where we're going to be doing this. We're going to display the search and the maps icon on one row, and then below that the search icon into big size on the row below that. Okay? Alright I'm going to go onto my code editor. Here I have the class-based.htm open from the 03_03 directory. And first thing I want to do is jump over to my styles.
All right, so I'm going to go to the CSS. I'm going to scroll all the way down here towards the bottom, and here's where I have my icon font styling. Now, to make this a little quicker than typing every single line, I'm just going to paste in some code that I've written here. You guys can pause the video and type this in, but I want to go over what this is doing here. So, here we have our attribute selector, class star equals icon. Before and then we are applying the chunky mobile font, that's the one we've defined earlier. Then we have our font-weight, font-styles for all the normalization we have a rendering and then I have specifically chose to display my icons at 32 pixels.
The only reason I'm really choosing that, is because I wanted it large enough for you guys to see it on the screen when I'm showing it. So, and it's a multiple of 16 which is what it was designed for, so essentially that's me just saying, hey I want to make sure you can see this now. Now, I'm going to change something up here in the middle of this exercise. Right now I'm using the universal selector but you can be very, very specific about how and when icons are applied. This is what we call a very inefficient selector because in order to parse this the browser has to go through and look at all the elements. I'd like to make this a little bit more specific. So I'm going to say span, because the only time I'm going to apply an icon or the only way to apply in this system that I'm building for myself, is through the use of a span tag.
I see a lot of people out there using the, the italics tag to apply icons. They'll use the i element. So it will go i and then class because i for icon. No, i stands for italic. And I'm really dead-set against using HTML elements to represent something that they don't actually represent in the specifications. So, you may see people out there deploying icons by using the i tag. But if you see that, there's nothing wrong with it. It's not going to break anything. But I just don't find that semantically pure. So I like using span tags. So there is that. That's the beginning of this.
That's the first step. I'm going to save this and the next thing I'm going to do is paste another little snippet of code down here. Once again you guys can just pause the video and come back, and I'm also going to go ahead and convert these to spans, so they do what I want them to do. There we go. Alright so let's take a look at these two selectors in detail. Again we're using class attribute selector, and now I'm saying I want you to match any pattern of a class that has dash search, and this one is getting dash maps. The only thing we're doing here, again we're using the before pseudo selector, and what we're doing here is we're saying for content I want this character.
For maps I want this character. So that's all those are doing. Now, if we were going to build out this whole icon system that we're starting to build right here, I would now need to take the time to go in and do every single icon. In the case of chunky_mobile that would require around 93 of these classes. So, I'm not going to kid you and say it's not a little bulky. It is a little bulky. But, once you get it built it's a super easy to use.
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.