CSS Sprite Menu Icons

[lvvvvvl]

Hello,

I’ve recently been trying to optimize my websites speed and one of the suggestions is to use css sprites to reduce requests.

I’m still learning about CSS and I created a menu for my website that has icons displayed next to each Category. I was wondering if there’s anyway to “sprite” them while maintaining their assigned position in the menu:

This is the code:

/*_____MENU ICONS_______*/

.nav-primary .about a {
background:url('/wp-content/uploads/2013/08/about.png') no-repeat 1.2em 1.3em; transparent;
padding: 18px 15px 15px 40px;
}

.nav-primary .contact a {
background:url('/wp-content/uploads/2013/08/email.png') no-repeat 1.2em 1.3em; transparent;
padding: 18px 20px 15px 40px;
}

.nav-primary .sitemap a {
background:url('/wp-content/uploads/2013/08/sitemap.png') no-repeat 1.2em 1.3em; transparent;
padding: 18px 20px 15px 40px;
}

.nav-primary .tests a {
background:url('/wp-content/uploads/2013/08/tests.png') no-repeat 1.2em 1.3em; transparent;
padding: 18px 15px 15px 35px;
}

.nav-primary .store a {
background:url('/wp-content/uploads/2013/08/store.png') no-repeat 1.2em 1.2em; transparent;
padding: 18px 15px 15px 35px;
}

.nav-primary .entertainment a {
background:url('/wp-content/uploads/2013/08/entertainment.png') no-repeat 0.8em 1.3em; transparent;
padding: 18px 15px 15px 35px;
}

.nav-primary .health a {
background:url('/wp-content/uploads/2014/06/health.png') no-repeat 0em 0.8em; transparent;
padding: 18px 15px 15px 28px;
}

.nav-primary .life a {
background:url('/wp-content/uploads/2013/08/life.png') no-repeat 0.9em 1.0em; transparent;
padding: 18px 15px 15px 35px;
}

.nav-primary .love a {
background:url('/wp-content/uploads/2013/08/love.png') no-repeat 0.8em 1.3em; transparent;
padding: 18px 15px 15px 35px;
}

.nav-primary .mind a {
background:url('/wp-content/uploads/2013/08/mind.png') no-repeat 0.5em 0.7em; transparent;
padding: 18px 15px 15px 35px;
}

.nav-primary .spiritual a {
background:url('/wp-content/uploads/2013/08/spirituality.png') no-repeat 0.9em 1.3em; transparent;
padding: 18px 20px 15px 35px;
}

.nav-primary .misc a {
background:url('/wp-content/uploads/2013/08/misc.png') no-repeat 1.1em 1.2em; transparent;
padding: 18px 15px 15px 35px;
}

[Paulie_D]

Using sprites is just a matter of using the background position settings.

As far as I can see this should not be a problem given what you have so far.

[Guy]

To create a sprite manually, you would need to create one large image that contains all the individual icons you have in the nav and set that as the background image to all of the nav items.

You then use width and height properties to create a “window” through which only part of the large background image will be visible and use background-position to move that image around.

There is also a syntax error in your snippet above where each background declaration ends with a semi-colon and is followed by transparent. The transparent part will be ignored as it’s not valid CSS syntax in this case.

[Paulie_D]

To create a sprite manually, you would need to create one large image that contains all the individual icons you have in the nav and set that as the background image to all of the nav items.

It’s worth mentioning that there are online sites that will take a whole bunch of images and convert them into giant sprite image…

The name SpriteCow rings a (cow)bell..but that could be old news but a search for “sprite generator” should get you there,

[Author]

Posts