Deploying Icon Fonts for the Web
Illustration by John Hersey

Adding the data-icon attribute


Deploying Icon Fonts for the Web

with James Williamson

Video: Adding the data-icon attribute

In the previous exercise, we were talking about ways that you and I want to go back into my HTML file.

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
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
James Williamson

Adding the data-icon attribute

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.

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


You have completed Deploying Icon Fonts for the Web.

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

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 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 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 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

Sign up and receive emails about 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.