How to include icons in globalnavigation

Question

Okay so I'm currently fooling around with some advanced stuff regarding SharePoint branding. A challenge accepted was to include icons in the Global Navigation.

I tried using jQuery, with success none-the-less. So far so good. But this was pointed specifically on menu items, not dynamical, which of course is my issue now. How can I include icons in the navigation through standard SharePoint? jQuery obviously is not an option as it shall work on mobile units as well.

I want it to render with the icon at the top and then the link-text below it.

Image
Title

First things first of course. For now I just want it to work on a Desktop browser, the mobile can come in to concideration later.

Any suggestions, ideas, even links to awesome blogs on the subject?

Thank you.

---

EDIT: Found this link http://www.thesug.org/blogs/kyles/lists/posts/viewpost.aspx?id=26&PF=1 which has given me a pretty good start. But again that's for specific items.

Answer 1

A better approach is to design your css classes and assign it to the menu control used for Global Navigation. Below is how a menu (with default css) can be placed in master page.You can include the icons in a css class and use that class in StaticMenuItemStyle CssClass=<your class name>" below

<SharePoint:AspMenu
      ID="TopNavigationMenu"
      Runat="server"
      DataSourceID="topSiteMap"
      EnableViewState="false"
      AccessKey="<%$Resources:wss,navigation_accesskey%>"
      Orientation="Horizontal"
      StaticDisplayLevels="2"
      MaximumDynamicDisplayLevels="1"
      DynamicHorizontalOffset="0"
      StaticPopoutImageUrl="/_layouts/images/menudark.gif"
      StaticPopoutImageTextFormatString=""
      DynamicHoverStyle-BackColor="#CBE3F0"
      SkipLinkText=""
      StaticSubMenuIndent="0"
      CssClass="ms-topNavContainer">
        <StaticMenuStyle/>
        <StaticMenuItemStyle CssClass="ms-topnav" ItemSpacing="0px"/>
        <StaticSelectedStyle CssClass="ms-topnavselected" />
        <StaticHoverStyle CssClass="ms-topNavHover" />
        <DynamicMenuStyle  BackColor="#F2F3F4" BorderColor="#A7B4CE" BorderWidth="1px"/>
        <DynamicMenuItemStyle CssClass="ms-topNavFlyOuts"/>
        <DynamicHoverStyle CssClass="ms-topNavFlyOutsHover"/>
        <DynamicSelectedStyle CssClass="ms-topNavFlyOutsSelected"/>
    </SharePoint:AspMenu>