Hi I'm working on my page and stumble upon some obstacles. Here's the first one:

I want to define an icon from sprite set to each page in my top menu, just the way Ideafart did it:
http://ideafart.com/

Now it looks like this: http://uxjourney.co.uk

I want to set Pacman changing to ghost in 'Bio' page and ghost changing to Pacman in 'Contact' page.

For now I could only managed to set the same for two pages ;/

I've changed it in the CSS menu1:
#menu1 > li > a > i {
display: block;
width: 24px;
height: 24px;
margin: 0 auto 5px auto;
background: transparent url(%tpldir%/images/menu-icons-0090d3.png) 0 -1728px no-repeat;
}

#menu1 > li:hover > a > i {
background: transparent url(%tpldir%/images/menu-icons-0090d3.png) -24px -1752px no-repeat;
}

I tried doing it that way by pasting these below, but it didn't work at all (no icons):

#menu1 .bio > a > i { background-position: 0px -1752px; }
#menu1 .contact > a > i { background-position: 0px -1728px; }
/* Part 2 - for hover state: */
#menu1 .bio:hover > a > i, #menu1 .bio.active > a > i { background-position: -24 -1728px; }
#menu1 .contact:hover > a > i, #menu1 .contact.active > a > i { background-position: -24px -1752px; }

Could you please help me with this?

Where did .bio and .contact come from? That doesn't look right to me.

.Bio and .contact are my pages. I found these names in the CSS setting instruction for 'using menu icons'.

But as I wrote I tried pasting it (style for .bio and .contact), but the icons have disappeard, so I removed it from CSS and changed only these lines:

background: transparent url(%tpldir%/images/menu-icons-0090d3.png) 0 -1728px no-repeat;
}

#menu1 > li:hover > a > i {
background: transparent url(%tpldir%/images/menu-icons-0090d3.png) -24px -1752px no-repeat;
}

But as you can see this applies to both icons and I want to set different style for each icon.

The background lines should only be in the css once for regular state and once for the hover state. Then you change the second number in the using css menu icons section where you want and then copy the code and page int the menus_menu1.css replacing the code that is there.

I am not clear on what you are doing.

the url you provided gets a 'Server not found' error

what are your permalinks set to?

Hi, I've edited my first post, there was a misspell in the address.