Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Deploying Icon Fonts for the Web

From: Deploying Icon Fonts for the Web

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.

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.

Show transcript

This video is part of

Image for Deploying Icon Fonts for the Web
Deploying Icon Fonts for the Web

21 video lessons · 2259 viewers

James Williamson


Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
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

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 ?

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 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 lynda.com 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 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.