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, youdon't have to worry about all those weird coordinates and tryingto figure out exactly how to get something to displaywithin the little window that you're making for your background image.Where there's another benefit that's equally important in my opinion, andthat 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 orreally change any visual styling for it unless it's anSVG file and even that's kind of, kind of wonky.

But also scaling, you know, if you size theimage up, the image quality is going to degrade.Whereas if you're using icon fonts you have, theability to style them using all of the same visualstyling that you can do with text, and youcan scale them up without worrying about damaging image quality.So what we've got here is a little exercise file that has a Menu bardown 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 bitbetter 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 thatscreen 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 whichis going to hide the text from thelayout, 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 weknow 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 abackground color, displaying each of the list items as in line block.And then if I scroll down, here I've got the alternate text beingsent 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, andit's these styles that I want to modify to makemy menu maybe look a little bit more attractive.

Now the first thing that I'm going to do hereis 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 usemargins, 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 tochange the color of the background because the icons are what they are.Or I could go back to Photoshop or Illustratorand 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 ofcome 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 weirdcontrast going on between the foreground color and the background color.Now, I could certainly, if I wanted to, go ahead andtweak that a little bit by modifying all the colors here.But I like the fact that one of the things that we can doto icons is apply text shadows to them the same way we can with text.Now, people seem to take this a little too far, soI'm always one of those guys that says less is more.

So, I'm going to do a text shadow here and I'mjust 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 popsit 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 alot of, some of them have sometransparency inside of them, some compound paths.

You want to be careful with how much youapply tech shadow and sort of how you're using it.You could certainly do it to make it look likeit 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 togo to the HTML file because I want to point out thatone of these and it's the mail icon, if welook in it's span tag, it has a class of inactive.

And one of the things I want to point out hereis a lot of times when people are using the techniquethat I'm showing you guys to display icon fonts, whichwould be to use the data icon attribute and generated content.They have a little bit of trouble targeting individual instances of thatwhen 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 myicons 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 sayingokay, 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 youknow, what maybe it wasn't as specific asI 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 isa 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 parentelement 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 selectorto target the generated content and people often forget that.So I'm going to save that, go back into mybrowser, and now it looks like an inactive icon.Perfect.Okay.So that's just some of the basic styling that you canuse to take care of your icon fonts and size them,change their color, you could also do text transforms if youwanted 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 thepractical things that you can do to say align icons to text.And we're going to go a little bit further andtalk about things sort of advanced styling that you cando such as animating your icons as well, andwe'll get to all of that in just a moment.

Resume Transcript Auto-Scroll

Author

Released

4/29/2014

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.