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

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

Deploying Icon Fonts for the Web
Illustration by
Watching:

Basic icon styling


From:

Deploying Icon Fonts for the Web

with James Williamson

Video: Basic icon styling

One of the main benefits to using an icon font instead of images to display icons, Here in the Code Editor.

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

Basic icon styling

One of the main benefits to using an icon font instead of images to display icons, is the fact that you have only a single server request for all of your images. And unlike when you're using a CSS sprite sheet, you don't have to worry about all those weird coordinates and trying to figure out exactly how to get something to display within the little window that you're making for your background image. Where there's another benefit that's equally important in my opinion, and that is the ability to style your icons using basic CSS styling. If you place an image on the page, for example, you're not going to be able to change its color or really change any visual styling for it unless it's an SVG file and even that's kind of, kind of wonky.

But also scaling, you know, if you size the image up, the image quality is going to degrade. Whereas if you're using icon fonts you have, the ability to style them using all of the same visual styling that you can do with text, and you can scale them up without worrying about damaging image quality. So what we've got here is a little exercise file that has a Menu bar down there at the bottom of this and that's being styled with our icon font. So what we're going to do is we're going to make it a little bit better by just supplying some really basic styling to each of the individual icons.

Here in the Code Editor. Same file, styling.html, which is found in the 04_01 directory. And I wanted to show you guys, kind of how this is architected. So if I scroll down to the bottom, I have a, an unordered list to make my menu. I, each list item, I have some text that screen readers will read, home, mail, cloud storage and documents. And then I have some span tags. One to show the data icon, and the other one to do the alternate text which is going to hide the text from the layout, but still leave it visible to screen readers.

Okay, now if I go to my CSS and scroll all the way down to the bottom where we know our icon styling is I've got a couple styles here that are formatting our menu. Basically taking the list styling off of it, giving it a background color, displaying each of the list items as in line block. And then if I scroll down, here I've got the alternate text being sent off to the side like we did in one of the previous exercises. And then I've got sort of the basic global styling for each of our data icons, and it's these styles that I want to modify to make my menu maybe look a little bit more attractive.

Now the first thing that I'm going to do here is increase the size of these a little bit. So to do that, I'm just going to do font size and I'll size it at 32 pixels. I could use but I want to use a specific size for this. I'm going to save this, and then let's check that out in the browser. And you can see my icons are a little bit bigger. Cool. I'm going to set my display to inline block for these as well, so that I can use margins, and then I'm just going to set a margin to the right of 1.2 ems.

Okay I'm going to save that. Check that in the browser. And now we have a little bit of space in between them. A little hard to see with the black icon on sort of a grey background. Now if this was an image, then I would I need to change the color of the background because the icons are what they are. Or I could go back to Photoshop or Illustrator and change the color, re-import them, that sort of thing. But with CSS I can kind of experiment and see which colors I like. So, for example, I can come down and just say color. And when I'm picking a color here, I can just sort of come in and play around with this and do whatever I'd like.

Orange would give that some contrast so I'm going to do DC8 C1D. We'll save that, go back out, and indeed they're looking kind of nice. The only problem with them now is there's some weird contrast going on between the foreground color and the background color. Now, I could certainly, if I wanted to, go ahead and tweak that a little bit by modifying all the colors here. But I like the fact that one of the things that we can do to icons is apply text shadows to them the same way we can with text. Now, people seem to take this a little too far, so I'm always one of those guys that says less is more.

So, I'm going to do a text shadow here and I'm just going to do one pixel offsets all the way around. I'll do a zero pixel blur. We'll see how that looks first. A black shadow 000. Save that. And yeah, I kind of like that actually. I like the way that looks. It gives a little nice little contrast pops it off, gives it almost an embossed look. That's one of the nice things about this. You can adjust that tech shatter to kind of do what you want to with it. Again, you know, with icons especially with icons like this where you've got a lot of, some of them have some transparency inside of them, some compound paths.

You want to be careful with how much you apply tech shadow and sort of how you're using it. You could certainly do it to make it look like it has an inner shadow or a beveled look to it. You know, there's a lot of different things you can do with tech shadow. Well that's just some of the basic styling that you can do with icon fonts, which is really great and it's a real step above what we can do with images. Okay, there's one more thing we need to take care of. Let's jump back into the code and I'm actually going to go to the HTML file because I want to point out that one of these and it's the mail icon, if we look in it's span tag, it has a class of inactive.

And one of the things I want to point out here is a lot of times when people are using the technique that I'm showing you guys to display icon fonts, which would be to use the data icon attribute and generated content. They have a little bit of trouble targeting individual instances of that when they're looking to change say the color of just one of these. So we're going to try to make our mail icon look like it's inactive. Now currently, if I got back to the CSS, all of my icons are being styled with the same selector, this one right here.

So here's what people typically do. Let's say we apply a class to that span tag, right? Well classes are fairly specific. So, you would think they're just saying inactive, and coming in and saying okay, let's change the color of that to something sort of maybe grey, 888. There we go, so let's save that. And then they'd go back to the file. And they previewed that in their browser again, and oh, nothing, nothing changed. Alright well, then they rationalized well you know, what maybe it wasn't as specific as I thought it was and I'm just going to throw a span on there as well.

So let's save that and try it. And no, nothing happens. If you're wondering why that little box is showing up, it's because brackets is a great code editor and it always wants to show you what you're focused on. So isn't that nice of it. anyway, typically the thing that people forget is this. When we're displaying our icon, we're doing it with generated content. So even though the span is the tag it's inside of, it's kind of like a parent element because it's this, the before pseudo selector, the generated content, that's actually doing the styling.

So I could style that span tag all day long and nothing would happen. I've got to remember to add the pseudo selector to target the generated content and people often forget that. So I'm going to save that, go back into my browser, and now it looks like an inactive icon. Perfect. Okay. So that's just some of the basic styling that you can use to take care of your icon fonts and size them, change their color, you could also do text transforms if you wanted to, to rotate them, or to move them in certain ways.

Obviously here we use a little bit of text shadow to create a bevel. There are a lot of different things that you can do. As this chapter goes on, we're going to talk about some of the practical things that you can do to say align icons to text. And we're going to go a little bit further and talk about things sort of advanced styling that you can do such as animating your icons as well, and we'll get to all of that in just a moment.

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

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.