Join James Williamson for an in-depth discussion in this video Basic icon styling, part of Deploying Icon Fonts for the Web.
- View Offline
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.
Want to create your own icon fonts? Check out James' companion course, Creating Icon Fonts for the Web.
- 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