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.
In the previous exercise, we were talking about ways that you can build a more efficient class-based solution to deploying icon fonts. Notice I didn't say efficient, I said more efficient. And that's because doing a class-based approach to deploying icon fonts means that you have to create a class for every single individual icon that you want to deploy. And not only is that not efficient, what happens if your icon font changes, or somebody comes in and brings in a new icon font, or modifies the encoding of the old one.
Now all of a sudden your classes don't work any more and you have a lot of updating and maintaining to do to your styles. So, perhaps a more efficient way, to display icons with icon fonts is through the use of the data-icon attribute. Now, there's some of you out there that have never heard of the data-icon attribute before, I wouldn't be surprised, mainly because not too long ago, some people just kind of made it up. You see, in HTML5, we gain the ability to create these custom data attributes. So essentially it's just data and then a dash and then whatever you want.
So it could be data-name, it could be data-address. In the case of icons, we're doing data-icon. Basically it was created as a way of storing data that the user didn't have access to but that scripting and styles and things like that could access. So it's a way of kind of storing really discrete local data about an element within your code, it's perfect for doing icon fonts because we can store encoding values for glyphs directly inside this attribute.
And that way can sort of abstract it from our styles, and we can write more efficient styles. Let me give you an example. It's just a little weird unless you've actually seen it. So let me scroll down a little bit and you can kind of see what's going on here. So very top, we have a style. And we're saying any element that has a data icon attribute, I want to use this icon font and, for the contents, I want you to look inside of the attribute data icon and give me its contents. So this right here, and I can't stress this enough, this is the key to making this work.
In generated content styles, the before and after pseudo selectors. One of the things that we can do, in terms of the value for content is use this attribute function right here. The attribute function allows us to say hey, on that element find this particular attribute and then give me the contents of that and we'll display that. So that allows you to store data in an attribute and then generate that content on the page. Through the use of the before and after pseudo selectors, which is a really neat solution. Because now, I can go down in my HTML code and say, got a span tag.
Let me apply the data icon attribute to it, and I'm going to pass in the HTML entity. Now, before we were using the Unicode value escaped with an escaped character, and the data icon attribute in order to get that to work in the function you have to use the actual HTML entity because it takes this as a literal string it isn't part of it. It takes it as a literal string and puts it on the page. And then the browsers will interpret the HTML entity, so you have to know the HTML entity. A couple of ways to format that let me go ahead and go over the formatting of it.
Basically you use the ampersand and then the octothorpe or the pound symbol and then an X and then you do the unit code encoding and then you end it with a semicolon. There is another way to do that every single character including the private use areas have their own individual HTML character entities that don't require the octothorpe and the X. And I don't know what they are so those are the ones I always use because I can remember them. That may seem a little obtuse I hope I did a good job of explaining that, obviously the easiest way for us to really get what we're talking about is to go in and do it.
So I'm going to go ahead and do this exercise and I'm going to go into my code editor and in 03_04 directory I have the file that we are just looking at, the data icon file, opened up. So the first thing we're going to do is go into my styles, so I'm going to go into my CSS and I'm home up the base test CSS. And I'm going to scroll down all the way to the bottom here, and find my icon font styles. Now once again, just in order to save a little bit of time, and to keep you guys from having to watch me type because I'm not a great typist. I'm just going to go ahead and paste this code in. Feel free to pause the video type it in.
Make sure you're really careful about white space and things like that. And then we'll go over it line by line. So go ahead and pause the video, type this in, and then start it again. Let's take a look at what we've got going on here. I have a span element selector. And I'm applying an attribute. It's basically an attribute selector that's targeting any span. With the attribute data icons. So you'll notice I'm not using the universal selector here, I'm using a specific one. So in my system that I'm creating for myself, for icons to be deployed I have to use a span tag. Alright, so I'm saying data icon and then here's the before pseudo selector, I'm saying okay, go ahead and give me the chunky mobile font family and then for content, again here's the important part.
Where on the attribute function you find the data icon attribute and give me those contents. Font weight is going to be 400 so after this you guys are familiar with this, we're just normalizing this and improving the rendering a little bit, and I've also, just so we can see the icon a little bit better, I am cranking the font size up to 64 pixels. You can do whatever you want to with that, as a matter of fact. So now I'm going to go ahead and save this, and I want to go back into my HTML file. In my HTML file, I'm going to scroll down and towards the bottom I see the span tag that the exercise is in.
Okay, so for this, I need a data icon attribute. So data icon. And then I'm going to say equals, and now I need to go ahead and remember how to encode that HTML character entity so what I'm going to do is ampersand, octothorpe, X, so those three characters in a row, and then whatever encoding I want to do and it's a big font with a lot of stuff in it. So let's just shoot something here at random. So I'm going to say e023. I really actually don't know which one that is. We'll find out. Do a semicolon and then close the quotation mark.
Okay, I'm going to go and save that and I want to preview that in the browser. Now as I scroll all the way down. I can see that's the forward icon so it appears right here on the page. Now what's really cool about this system. Rather tha using a clients base approach, is now, if I wanted it to display a different icon, it's as simple as changing that value. So now we'll come back in here, and let's say we do something like 64, save that, test it, and I get the no signal bars, let's just do one more, I'm going to come in and do e086, we'll save that, preview it.
And now we see the power icon showing up. I think just seeing this for the very first time, it's pretty easy to tell how amazingly efficient this is. Because we just wrote a single selector in our CSS, that is controlling the application of the icon font, which glyph is being displayed, And then all of the global styles for that in one single selector. I mentioned doing a class based approach versus the data icon approach I'm showing you here, but they're really not two separate things. You can actually combine them together. There's nothing saying we now can't go in and establish a really complex system of classes that are going to help us style these icons in meaningful ways.
Maybe based upon size, color, position, animation, those types of things. And we can do all of that without having to worry about writing individual classes for each glyph. So, I think you can see using the data icon attribute is an extremely efficient way of display icon fonts.
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.