Image before menu item

Dear forum members, I want to set up the icon before menu item, but my css skill is not so high. Could you please help me solve the problem with align and margin of the image? I think I need to do new css class but in which file? Thank you

css-style.jpg

Could You please post an url to your site?
Could you create an image that shows how it should look exactly?

Sure, this is the url: http://www.turieconline.sk/

Image should be aligned in the middle and with right margin maybe 3-5 px

Please edit: /templates/gk_twn2/css/override.css and add at its end:

Code: Select all

#gkMiddleMenu ul.menu li:first-child a {
    padding: 0 0 0 20px;
    background: transparent url('/templates/gk_twn2/images/joomla/calendar.png') no-repeat left 5px;
}


If this will not work, use:

Code: Select all

#gkMiddleMenu ul.menu li:first-child a {
    padding: 0 0 0 20px;
    background: transparent url('../images/icons/calendar.png') no-repeat left 5px;
}


or:

Code: Select all

#gkMiddleMenu ul.menu li:first-child a {
    padding: 0 0 0 20px;
    background: transparent url('../images/joomla/calendar.png') no-repeat left 5px;
}


Remember to enable "CSS override" in template settings - advanced section.

Thank you, the first code worked.