How To Use CSS Sprites As Icons In Styling Navigation


show more Using CSS sprites for icons provides you with in-depth training on Developer. Taught by James Williamson as part of the CSS: Styling Navigation show less
please wait ...

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

Using CSS sprites for icons
Video duration: 14m 30s 5h 14m Beginner

Viewers:

Using CSS sprites for icons provides you with in-depth training on Developer. Taught by James Williamson as part of the CSS: Styling Navigation

Subjects:
Developer Web
Software:
CSS
Author:
please wait ...