How can I add inline icon images to nav menu?

  • hi all!

    i need to add little icons in what would be the bullet position my nav items each item has a different icon, and the icon changes color in rollover/current states.

    i am already using the background image for the background color and don’t want to have a gazillion different button images. plus, we may ant to use the icon images in other places.

    is it possible to add these inline, or do i have to invoke multiple background images? (what is browser support for muti bg images these days, anyway)

    https://www.dev.threeriversfitness.com — the icons are not there, but you can see everything else for a better idea of what i want to do. ??

    thanks!

Viewing 4 replies - 1 through 4 (of 4 total)

  • One approach would be to use a combined CSS image sprite and then simply shift the image to display the appropriate icon as needed using the CSS background attributes. Other than that, you could use list-style-image.

    Thread Starter mtouchette

    (@mtouchette)

    hi esmi, thanks for your response.

    one thing i might should mention is that the current (two, only, one blue and one green) background images are set to100% of the width for responsiveness. so not sure the shifting sprite would be the best solution.

    if i use list-style-image, can i change that for each list item? e.g. a little house for home, dialog bubble for about us, etc.? if so, how do i specify which images goes with each item, via the menu item id number?

    can i change that for each list item?

    Yep. ??

    If you examine the source markup of the top menu using something like Firefox with the Firebug add-on, you’ll see that each menu item has it’s own list of classes on the <li> tag. at least one of them will be unique – eg menu-item-43 for the About Us item. You can use these in your CSS to target each list item individually.

    Thread Starter mtouchette

    (@mtouchette)

    okay, i did the firebug thing and got the item numbers for each nav tab. here’s what i have for the ‘home’ ID and classes:
    home –

    #menu-item-82

    homeRest –

    .menu-item menu-item-type-post_type menu-item-object-page menu-item-82

    homeCurrent –

    .menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-37 current_page_item menu-item-82

    so for example, i would make the declaration like so:
    .menu-item menu-item-type-post_type menu-item-object-page menu-item-82 {list-style-image:url[fullPathHere]; float:left;}
    and
    .menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-37 current_page_item menu-item-82 {list-style-image:url[fullPathHere]; float:left;}

    two questions:
    1. does the item designation *really* have to be that long? and,
    2. what would it be for the rollover focus state?

    more thanks!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How can I add inline icon images to nav menu?’ is closed to new replies.