Adding icon to <li> menu

Question

i am working on a school project and I am stuck at a point where i want to put an image ( >><< ) inbetween <li> -tags. Because it's a navigation in wordpress it's done in php.

Here is what i have:

img http://img825.imageshack.us/img825/253/screenshot20120529at305.png

Here is what i want (look at the blue thingies in between the menu items):

img http://img703.imageshack.us/img703/253/screenshot20120529at305.png

I think this is the php where i need to put my image/menuitem.png.. but where? Help would very much be appreciated

 function inkthemes_nav() { if (function_exists('wp_nav_menu')) wp_nav_menu(array('theme_location' => 'custom_menu', 'container_id' => 'menu', 'menu_class' => 'ddsmoothmenu', 

'fallback_cb' => 'inkthemes_nav_fallback')); else inkthemes_nav_fallback(); }

 function inkthemes_nav_fallback() { ?> <div id="menu"> <ul class="ddsmoothmenu"> <?php wp_list_pages('title_li=&show_home=1&sort_column=menu_order'); ?> </ul> </div> <?php } function inkthemes_home_nav_menu_items($items) { if (is_home()) { //home $homelink = '<li class="current_page_item">' . '<a href="' . home_url('/') . '">' . __('Home', 'themia') . '</a></li>'; } else { //niet home $homelink = '<li>' . '<a href="' . home_url('/') . '">' . __('Home', 'themia') . '</a></li>/>'; } $items = $homelink . $items; return $items; } 

Answer 1

Try to use a CSS-Only solution:

.ddsmoothmenu li {
  background: url('image/menuitem.png') no-repeat left center;
  padding-left:30px /* you have to adjust this manually */
}
.ddsmoothmenu li:first-child{
  background:none;
  padding-left:0;
}

Answer 2

You will have to add an image tag at both locations that say HERE, however that would also put an image behind the last item.

$homelink = '<li class="current_page_item">' . '<a href="' . home_url('/') . '">' . __('Home', 'themia') . '</a></li> HERE';
    } else {
     //niet home
 $homelink = '<li>' . '<a href="' . home_url('/') . '">' . __('Home', 'themia') . '</a></li>/> HERE';

Better would be to add it using css, something like:

#menu li {
 padding-right: 30px;
 background: url('path/to/image') no-repeat right center;
}

#menu li:last-child {
 background: none;
}

Answer 3

See the css property list-style-image . You may prevent this on the first one with the css class :first-child

Here as an example:

.ddsmoothmenu li {
    list-style-image: url('image/menuitem.png');
}
.ddsmoothmenu li:first-child{
    list-style-image:none;
}