Drupal 7: adding an image to 1 menu tab

Question

The main menu at my Drupal 7.2 site is represented as tabs. I wonder please, how could I add an image to one of the tabs - for example a letter-icon for the last /contact tab?

When I look at the HTML code I see that tab as a class="menu-276 last" list item:

<div id="main-menu" class="navigation">
<h2 class="element-invisible">Основные ссылки</h2>
<ul id="main-menu-links" class="links clearfix">
<li class="menu-270 first active"><a href="/" class="active">Преферанс</a></li>
<li class="menu-300"><a href="/help">Как играть</a></li>
<li class="menu-278"><a href="/top20.php">Рейтинг</a></li>
<li class="menu-368"><a href="/forum/1">Форум</a></li>
<li class="menu-392"><a href="/etude">Этюды</a></li>
<li class="menu-276 last"><a href="/contact">Письмо админу</a></li>
</ul>
</div>

How would you be adding an image there, through editing the core Menu module or maybe there is a nicer way? (a CSS-solution would be ok too...)

Thank you! Alex

Answer 1

You could use CSS:

#main-menu-links li.menu-276 a {
  background: url(path/to/img.png) no-repeat left;
  padding-left: 16px; /* Change depending on icon size */
}