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

Using CSS sprites for icons

From: CSS: Styling Navigation

Video: Using CSS sprites for icons

In this exercise we're going to use single Sprite image to display the icons for our main menu items. We're going to focus on positioning the icons, modifying the existing links so that the icons will fit inside of them and then some of the considerations that we have to give for the different hover states so that our icons stay consistent. So I have the sprites.htm file open from the 06_05. I want to point out that inside the _assets folder in this same directory, we have the original icon_sprites file, it's an Illustrator file.

Using CSS sprites for icons

In this exercise we're going to use single Sprite image to display the icons for our main menu items. We're going to focus on positioning the icons, modifying the existing links so that the icons will fit inside of them and then some of the considerations that we have to give for the different hover states so that our icons stay consistent. So I have the sprites.htm file open from the 06_05. I want to point out that inside the _assets folder in this same directory, we have the original icon_sprites file, it's an Illustrator file.

If you wanted to open that up, if you have Illustrator, and kind of use it as a reference as we work on this exercise, feel free to do so, that's fine. If you don't, don't worry, it doesn't detract from the exercise at all, it might be helpful to you to kind of really get a feel for why we're doing some of the things that we're doing if you can reference that file, okay? Now, before we get too deep into this, I have a confession to make. I could have made this exercise easier on you by using like just the static horizontal menu rather than this dropdown menu. Using a dropdown menu in Sprites like this really throws a lot of curveballs at you, and the reason that I chose this is because I really wanted you to see the pros and cons of using Sprites.

Sprites are a fantastic way of making your websites a little bit more efficient, but you should know that the more complex your sites get, the more things you have to consider and take into consideration when you start using Sprites. So I wanted to give you a real world flavor, if you will, of some of the things that you're going to run across as you start using them in your own projects. There are a couple of things I want to point out that's a little different from our previous horizontal dropdown menu. First off is the list items themselves, then have a little bit more spacing. As a matter of fact, if I were to preview this page in the browser, you can see what I am talking about, they're spaced out a little bit more.

The reason for that is the icons are going to show up right beside these guys, and if they were real close together, it would look very crowded, because we're going to have to give a little bit more space here. So I just decided to space them out just a tad bit more. Also in the source code, the menus are structured just a little differently. The class current is now on the list items instead of the links themselves, that's going to help us target a few things. Each of the menu items that has an icon also has a class that identifies it. So we have home, we have products, we have blog, we have about, we have contact, and that's what we're going to use to target those so we know where to put the Sprite icons.

So now we're ready to start. The first thing I am going to do is I am going to go up, and I am going to start just displaying sort of a default Sprite, if you will. So we're going to be using positioning in just a little bit to show exactly the icon we want, but we're just going to have a sort of a starter Sprite show up, if you will, and that's going to be global for all of our links. So I am going to go up to the li a selector, and I am going to type in background. When you're dealing with Sprites, you're doing a background image, so I am going to do background:url, and I'll say _images/icon_sprites_25.png, so icon_sprites_25.png, and then close your parentheses.

And then this next part is really important here, I am going to say no-repeat, and I am going to do positioning of 2 pixels and 7 pixels. Now, the 2 pixels is the horizontal positioning, the 7 pixels is the vertical positioning. You might wonder, well, how did you arrive at those magic numbers? I'll be honest with you, trial and error. I usually put an icon in and say 0, 0, which is the default top left-hand corner, and then I just tweak the values, because every icon is different and getting it to line up vertically centered with some text is not always the easiest thing in the world to do, regardless of how well you structure your icons in the beginning.

All right, so I am going to save this, go back into the browser, and preview that. And all right, there are all of my icons. Now, that's not quite looking the way I want, the icons and text are running over each other, so I have to add a little bit of spacing to my links. I am going to go back into my li a selector here, and then on the next line I am going to go ahead and add some padding, and I am going to add padding: 0 for top, 1 em for right, 0 for bottom and then 2 ems for the left. So the 2 ems of padding on the left are going to give me enough room for the icon, the 1 em padding on the right is going to give me enough space on the right to where the spacing doesn't look entirely unequal. So I am going to save that, preview that again.

That looks a lot better, so now they're spacing out. Now, don't worry too much about how the house isn't lined up, that's not a big deal, remember for the Home link, it's not for these guys, and we are going to be positioning all of those icons individually in just a moment. So with that being saved, I am going to go back in, and I am just going to go ahead and copy this value of the URL. I am not going to copy the whole background declaration, I am going to copy this, because the icons are showing up right now for my links, but they're not showing up when they're hovered over and they're not showing up for current. Now, these guys already have existing background declarations, and they have colors in them that I don't want to overwrite.

So I am just going to add the URL to those, instead of replacing them. So I am going to go ahead and paste, and both of those directly after the color, very important, all right? So I am going to save that, preview that, and now my Home is showing up. And I told you the house would show up in the right place, so it's there all right, and it's also now in all of those hovers. You're also going to notice it's on all the submenus, too, so eventually we're going to have to get rid of it on those submenus. So the next thing we need to do is go in and target all of those individual ones.

So we're going to have to write some new selectors, and I am going to go ahead and warn you, yes, this is going to be a tad tedious, okay, so just follow with me. What we're going to do is we're going to use the class attribute that we have on each of these links to display the proper Sprite by using the background-position property. So I am going to do li a.home, so I am saying any link with the class of home inside of the list item. All right, now, rather than going ahead and replacing the background image every single time, we don't want to do that, we're just going to move it. We're not submitting another request to the server, we're just saying, hey, take the image you've already got there and move it, right? So I am going to type in this time background-position, background-position.

Now, the first value I pass is the horizontal position, the second value I pass is the vertical position, so I am going to say 2 pixels, and then 7 pixels, so 2 pixels, and 7 pixels. Now, that is what we had as the default, but I went ahead and set that, in case for rollovers and things like that, you want to be explicit, all right? Then I am going to go ahead and close that. Now, unfortunately we're going to have to do three versions of each of these. We're going to have to do the static non-interactive version, a rollover version, and then a current version. Now, why are we having to do all three? Well, I told you it would be a lot easier on you if I used a different menu.

Again, if I preview this, I want to show you something. Whenever we hover over one of these top level links, the link actually goes up. You can see the icon do that, you see how it jumps? That's because the link itself is jumping up. The text is staying in the same place because we have coded the padding to do that, but that doesn't mean that the link itself isn't still going up. So we can't use the same positioning values, we're actually going to have to figure out how far that's traveling and then account for it, which is really fun. So thankfully, I've done the math for you, and let's go in and just write a couple of more selectors here.

So after li a.home, I am going to type in li a.home:hover, .topmenu li:hover>a.home. Boy, that sounds fun to say, doesn't it? Okay, so what am I targeting here? Well, anytime this home link is hovered over, and anytime that the list item that it is inside of is also hovered over. Okay, so that's covering the link being hovered over, it's covering the list item being hovered over as well, because remember the list item being hovered over is what triggers the submenu to appear.

I am basically accounting for both of those instances now, because they both need the exact same values. For the home one, it's kind of odd, the home one actually uses those exact same value, it's the only one that does. And then I have one more selector to write for that, and this one is also a doozy. So I also have to account for the current icons. Now, if you remember from looking at the Illustrator file--let me just switch over to it real quick-- there are two versions of these icons, there is the static version, and then there is sort of this desaturated version.

It's the desaturated version that I want to show in this current page indicator. So we have to account for that for each one of these icons. So I am going to say .current a.home, .current a:hover.home, .topmenu--bear with me, we're almost done--li.current:hover a.home. Man, that's a lot, right? Well, let's go over each one of these.

Again, when the homepage is current, when the homepage being current is hovered over, and when the list item that is current is being hovered over, and home is also. So each one of those is triggering a different state above it in the menu, so I am going to go ahead and even all of those out, and this time I am going to use a different background-position. Now, to make life easier on you, you could copy and paste this, I think I will, and rather than 2 and 7, this time I am going to do 2 and -68.

Now, that's one of the interesting things about working with this background positioning. If you want to go down the page, you have to use negative values. So instead of going up, which is positive values, we want to go down which uses negative values. So that's why here we're doing -68. So again, if I save this, go back in my browser, test that, now I am seeing the desaturated Home show up, which is perfect. And I've got to be honest with you, these values that I am giving you, I had to tweak those values, and I fully expect that when you start using Sprites, especially to do icons on different pieces of text, you're going to have a value that you think is the value you want to use, and then you're going to end up tweaking it just a little bit to get it positioned in exactly the right spot.

Now, I am going to highlight this whole section of code here and copy that, and I am going to paste it below it. And the reason for that is because we have a lot more of these to do. Please don't leave this exercise yet. Don't hit the Stop button and then go do something else. I promise you I am going to make this quick for you, okay? Let's go ahead and do products next. So we'll just do one more, okay? I want you to see what it's like when you have to position another one, and so for each one of these I am going to change the word home to products. So that's the nice thing about it is once you get this sort of thing set up, you're really just going in and doing the same thing each time and just swapping out the class name.

And this is a very complex menu. I doubt most of your menus will really require you to do this much work. All right, now let's talk about the positioning that we need for products. If I go down into Illustrator--and let me just bring up my Transform panel--if I go down into Illustrator, and I click on one of these, I get a Y value for this, and I can use that Y value as a starting point. And of course, I am going to offset that for the top, and you can see it's at about 152.

So I can put in -152, and I know that's going to show up, then I would just tweak it from there, and that's exactly what I did for these. So for products, I am going to keep the two pixels for X consistent, that will be consistent for all of them. So -146 is the value I came up for that. I am going to do this just a tad bit different for the hover. For hover I am going to do -141. Now, why is that? Our links jump up when we roll over them. They actually jump up by computed 5 pixels, so that's why I am subtracting 5 pixels from the value of the normal one so that it would move up with it.

It's going to look like it's not moving at all, but in fact, it's moving down, but by moving down it stays in the same place while the rollover moves up. So there are a lot of little things like that that you have to consider when you start using Sprites. All right, the next thing I am going to do is for the current indicator, which we won't see because we don't have that class applied to it, we're going to do that one at 226, and you'll just have to trust me that, that goes down to the next sort of desaturated one. All right, I am going to save that, preview it, and yeah, there is my Products, it shows up, and notice when I hover over it, it does not move. Well, it does, but it just moves down when the rest of the rollover moves up, so perfect. You have to play around those values and arrive at exactly what you're looking for, but it's really not as tedious as it seems.

Now, to make life easier on all of us, if you scroll all the way down to the end of the code, you're going to find a little present that I have made for you. This is all the rest of these. So I am not going to make you hand code all of those, I am going to cut those out of the comment down there at the bottom, I'll get rid of that comment, and then below the existing ones which we lovingly handcrafted, I am going to paste those in. So I am going to save that, go back into my browser, and refresh, and now there is all my individual icons and rolling over and moving just fine. Now, feel free to tweak the positioning if you want to move them up or down a little bit, kind of play around with the values that I have in there. Just be sure to change the offset value, too, so that it doesn't shift up or down when you rollover them.

Now, we're almost finished, and this has been a long exercise, we're almost done, but there is one last thing we need to take care of. You'll notice as we hover over this, that icon, that default icon is still showing up down there, so we need to go ahead and get rid of that. So I am going to go back into my code, and I am going to go find the selectors that drive the submenu. So what I am going to do is I am going to find the submenu li selector, and I am going to add a margin to that. So the reason I am going to add a margin of 0 to it is because I didn't like the additional spacing that the margins that I put up on the li were causing that, so I chose margin: 0.

So if I save and refresh that, you can see now those menus are now shrink wrapped again back to their content, which is what I was going for. And the next thing I need to do is get rid of the default icons. I can do that using this selector right here, ul.submenu li a. And what I am going to do here is just add a background to it, and I am going to keep the background the same sort of brown color that we've been using, and I am just going to do #916A31, and that's going to overwrite the background above it that contains the image.

So I am going to save that, refresh the page, and now our submenus no longer have that default icon. Excellent, take a deep breath. Most of the time when I show somebody how to use CSS Sprites--and I've done it in earlier titles so you may have seen that already--I basically show a simple example that's really easy for people to position. However, for this course I really wanted to show you some things that can trip you up when you're adding Sprites to navigation menus. CSS Sprites are a fantastic way to save yourself some time and create a more efficient site.

You just have to be fully aware of how they fit into your menu structure and then plan accordingly.

Show transcript

This video is part of

Image for CSS: Styling Navigation
CSS: Styling Navigation

53 video lessons · 17165 viewers

James Williamson
Author

 
Expand all | Collapse all
  1. 3m 8s
    1. Welcome
      42s
    2. What you should know before watching this course
      1m 12s
    3. Using the exercise files
      1m 14s
  2. 35m 25s
    1. Organizing menus with lists
      4m 26s
    2. Ensuring accessibility
      9m 3s
    3. Using the nav element
      7m 30s
    4. Creating block-level links
      3m 8s
    5. Lab: Structuring navigation
      4m 11s
    6. Solution: Structuring navigation
      7m 7s
  3. 48m 42s
    1. Exploring link style considerations
      9m 2s
    2. Using global link styles
      9m 56s
    3. Styling link states
      10m 57s
    4. Indicating external links
      10m 4s
    5. Styling image links
      8m 43s
  4. 52m 5s
    1. Stripping default list styling
      4m 34s
    2. Defining link dimensions
      6m 0s
    3. Setting link styling
      3m 36s
    4. Aligning links vertically
      4m 11s
    5. Controlling link spacing
      2m 30s
    6. Styling menus with borders
      2m 32s
    7. Creating rollovers
      4m 45s
    8. Restricting link styling
      3m 31s
    9. Lab: Creating a vertical menu
      11m 44s
    10. Solution: Creating a vertical menu
      8m 42s
  5. 54m 58s
    1. Stripping list styling
      3m 35s
    2. Displaying links horizontally
      6m 14s
    3. Clearing floats
      6m 12s
    4. Controlling link sizing and spacing
      3m 11s
    5. Styling links
      7m 16s
    6. Creating rollovers
      5m 52s
    7. Indicating current pages
      4m 43s
    8. Controlling cursor states
      2m 46s
    9. Lab: Creating horizontal menus
      6m 45s
    10. Solution: Creating horizontal menus
      8m 24s
  6. 55m 35s
    1. Overview of dropdown menus
      1m 17s
    2. Structuring submenus
      5m 56s
    3. Styling submenus
      6m 4s
    4. Creating submenu rollovers
      3m 28s
    5. Positioning submenus
      5m 43s
    6. Controlling submenu display
      5m 5s
    7. Creating persistent hover states
      5m 53s
    8. Animating menus with CSS transitions
      6m 29s
    9. Lab: Dropdown menus
      6m 51s
    10. Solution: Dropdown menus
      8m 49s
  7. 58m 7s
    1. Creating CSS-only buttons
      8m 39s
    2. Creating special effects for buttons
      4m 2s
    3. Enhancing buttons with gradients
      7m 40s
    4. Overview of CSS sprites
      3m 30s
    5. Using CSS sprites for icons
      14m 30s
    6. Styling block-level links
      8m 38s
    7. Lab: Enhancing navigation with CSS
      5m 26s
    8. Solution: Enhancing navigation with CSS
      5m 42s
  8. 6m 29s
    1. Additional resources
      6m 29s

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

Congratulations

You have completed CSS: Styling Navigation.

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

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

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.