Change Logout, My Account link to icon

How can i edit the top menu item Logout, My Account and Profil to Icon unstead of Text Link?

thx

Have a look at the database table sys_menu_service

ok thx and what i enter in the icon field... the full icon URL?

I don't think the code for the service menu is complete for the icon.  The service menu builder has a field for the icon but it doesn't work.

There are several topics on this already.  I did this by using the template.  Of course if you have more than one language my trick might not work.

Search the forum for this and read through the results.

Hi, my website use only one language so i maybe can do your trick

i already check on the forum but i only find topic about the Login/Signup link

thx

My trick leaves the code as it is and just uses the template.  It uses the name of the link to match an icon I created and stored on the server; I used pngs so I could have transparent areas.

Look for extra_service_menu.html in whatever template you are using.

<div class="sys-service-menu bx-def-margin-sec-left bx-def-font-large">
    <bx_repeat:items>
        <span>
            <a class="sys-sm-link" href="__link__" __script__ __target__>__caption__</a>
        </span>
        <span class="bullet">&#183;</span>
    </bx_repeat:items>
</div>

What you need to do is to make some changes to the link, replacing the plain anchor tag with an image and anchor tag.

<img src="http://mysite.com/image_location/__caption__ .png"/>  Name the image the same as the caption, the caption is pulled from the menu structure.  So, you name an image profile.png (or jpg, or gif).  Replace __caption__  in the anchor tag with the image code and you are good to go.  It will build the menu for you and you have an image for each link in the menu.  Login will be replaced with logout just like the links work.

<div class="sys-service-menu bx-def-margin-sec-left bx-def-font-large">
    <bx_repeat:items>
        <span>
            <a class="sys-sm-link" href="__link__" __script__ __target__><img src="http://mysite.com/media/images/__caption__.png"/> </a>
        </span>
    </bx_repeat:items>
</div>

You can also create a set of images so you can have roll-over effects.  You would have to set up the CSS for handling the roll-over of course.

However, you may still want to do a search on the forms for changing service menu links to icons, or change profile link to icons, etc so you can get other ideas.

 ok but there is only one line for all link... what if i want to use a different icon for each link

Finally it was sooooo simple

i just add HTML code in the language string and it works!

<img src="IMAGE PATH" border=0 alt="LOGOUT">

Evidently you did not understand the code; but if your way works for you then I guess that is all that matters.

The template goes through and repeats, that is what <bx_repeat:items> does, it goes through the items in the service menu and adds them one by one, it is repeating the line of code.

Each time it does, the key __caption__ is changed, i.e., profile, login, logout, account, so that __caption__.png becomes profile.png, login.png, logout.png, account.png and whatever other item is in the service menu.  Is this now clear?

So, with this method, I can also add a CSS class to the link so that I can have a roll-over effect where when you move the mouse pointer over the icon, it changes.  You may can do the same with your method.  There are often more than one way to do the same thing; so you have given one more.

This topic is just an exact duplicate of http://www.boonex.com/forums/#topic/Adding-icons-to-the-service-menu-on-top-right.htm which already has a couple solutions.

Yes, I know.  However, the person seemed to want to continue this thread and it is about helping.  I am sure Boonex has the database space for a few similar topics.  I guess I could have said, "I am not going to answer here, go search and read those results." and left it at that.  However, that is not what offering support is about.