asp.net - need to add custom icons per nav section

GlobaLevel
GlobaLevel used Ask the Experts™
on
enclosed is the top portion of the nav bar I am using to vreate a nav bar on the site...but I need to have a custom icon per header...so I have an icon with graphic and 'Home' on it and another with 'About' on it....apart and compressed graphic..how do I get this in the nav bar?
<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" 
         StaticPopOutImageUrl="~/Content/Images/glossy_red_ball.gif"
          DynamicVerticalOffset="2" Height="10" 
            StaticEnableDefaultPopOutImage="false" 
            StaticItemFormatString="&amp;nbsp &amp;nbsp {0}">
            
            
         <DynamicMenuStyle CssClass="submenu" />
         
          <StaticMenuStyle BorderStyle="None" BackColor="#FFFFFF" />
            <StaticMenuItemStyle ForeColor="Black" 
              BorderColor="#D9D9E6" BorderStyle="Solid" BorderWidth="1px" 
              Font-Size="8pt" />
            <DynamicMenuStyle BorderStyle="Outset" BorderWidth="1px" 
             BorderColor="Red" BackColor="#C11B17" />
            <DynamicMenuItemStyle  Font-Size="8pt" 
             BorderStyle="Solid" BorderWidth="1px" BorderColor="#D9D9E6" />
            <StaticHoverStyle BackColor="Ivory" BorderStyle="Solid" BorderWidth="2px" 
              BorderColor="#D9D9FF" />
            <DynamicHoverStyle BackColor="Ivory" BorderStyle="Solid" BorderWidth="1px" 
              BorderColor="#D9D9FF" />
            <DynamicItemTemplate>
              &nbsp;&nbsp;
              <asp:Label ID="Label2" runat="server" Font-Names="Tahoma" 
                ForeColor="Black" Text='<%# Eval( "Text" ) %>'>
              </asp:Label>
              &nbsp;&nbsp;&nbsp;&nbsp;
            </DynamicItemTemplate>
         
         
         
         
            <Items>

      <asp:MenuItem NavigateUrl="~/Home.aspx" Text="Home " 
                  Value="Book 1">
                </asp:MenuItem>
                <asp:MenuItem NavigateUrl="~/Login.aspx" Text="Login " 
                        Value="Book 1">
                    <asp:MenuItem NavigateUrl="~/Customer_Login.aspx" Text="Customer" 
                      Value="Chapter 0"/>
                    <asp:MenuItem NavigateUrl="~/Associate_Login.aspx" Text="Associate" 
                      Value="Chapter 1">   
                        <asp:MenuItem NavigateUrl="~/Merchant_Login.aspx" Text="Merchant" 
                      Value="Chapter 1">      
                                          </asp:MenuItem>                   
                    </asp:MenuItem>
                </asp:MenuItem>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Commented:
Did you try adding Image control in DynamicItemTemplate just like label?

         <DynamicItemTemplate>
              &nbsp;&nbsp;
              <asp:Image ID="imgMenu1" runat="server" ImageUrl=' <%# Eval("ImageUrl") %>' />
              <asp:Label ID="Label2" runat="server" Font-Names="Tahoma" 
                ForeColor="Black" Text='<%# Eval( "Text" ) %>'>
              </asp:Label>
              &nbsp;&nbsp;&nbsp;&nbsp;
            </DynamicItemTemplate>

Open in new window


You need to pass Text as well as ImageUrl to menu than.
Most Valuable Expert 2012
Top Expert 2014

Commented:
Did you try adding ImageURL to

<asp:MenuItem NavigateUrl="~/Home.aspx" Text="Home " 
                  Value="Book 1">

?

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial