New Feature: Playlist Center! Pick a topic and let our playlists guide the way—like a learning mixtape.

Start learning with our library of video tutorials taught by experts. Get started

Deploying Icon Fonts for the Web
Illustration by

Creating class-based solutions


From:

Deploying Icon Fonts for the Web

with James Williamson

Video: Creating class-based solutions

There are a lot of designers and systems out there that use a So there is that.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
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
Subjects:
Web Web Graphics Interaction Design Web Design
Author:
James Williamson

Creating class-based solutions

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.

 
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.
Upgrade now


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

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?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

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

Are you sure you want to delete this note?

No

Notes cannot be added for locked videos.

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.