Metrostyle Icons

[Snaggle]

Hello, I am having some difficulty with the changing of icons in the Metrostyle theme and would like some help.

I want to change the default "Members" button to an offsite link with a different icon. I can change the link fine, but I cannot for the life of me get the icon to change. I want to use THIS icon that comes with Fontawesome and I see that I have that pack installed. Yet the header icons appear to be linked to /metroui/fonticon font, not fontawesome.

Why do we have 2 packs and how can I get the header buttons to use a fontawesome icon?

I can see the icon code in the fontawesome css.

[Snaggle]

A response would be appreciated.

[Tan]

I apologize for the delay. If you could PM me your forum that would be great. There are two types of fonts because we use font icons not included in fontawesome.

Go to header_menu_memberlist template and change the following:

<li><a href="memberlist.php"><i class="icon-earth"></i><span>Members</span></a></li>

To:

<li><a href="memberlist.php"><i class="fa fa-steam"></i><span>Members</span></a></li>

This is assuming the icon is present in fontawesome 4.2

[Snaggle]

Thank you that has done the job!

Hopefully last question. I want to turn one of the buttons into another drop down, like the "More" one is. If I try to copy/paste the code it just messes up the header bar. Can I insert another drop down styled button easily?

Thanks.

[Tan]

If you want to modify a current button such as "Help" to have a drop down with links then find the following in header template:

Code:

<li><a href="misc.php?action=help"><i class="icon-bookmark-4"></i><span>Help</span></a></li>

Replace with:

Code:

<li><a href="misc.php?action=help"><i class="icon-bookmark-4"></i><span>Help</span></a>
<ul class="submenu">

<li><a href="javascript:;"><i class="icon-list-2"></i>Link</a></li>
<li><a href="javascript:;"><i class="icon-list-2"></i>Link</a></li>
<li><a href="javascript:;"><i class="icon-list-2"></i>Link</a></li>
<li><a href="javascript:;"><i class="icon-list-2"></i>Link</a></li>

</ul>
</li>

To add another "More" drop down like the attached screenshot you will need to find:

Code:

<li><a href="javascript:;"><i class="icon-list-2"></i><span>More</span></a>

<ul class="submenu">

<li><a href="javascript:;"><i class="icon-list-2"></i>Link</a></li>
<li><a href="javascript:;"><i class="icon-list-2"></i>Link</a></li>
<li><a href="javascript:;"><i class="icon-list-2"></i>Link</a></li>
<li><a href="javascript:;"><i class="icon-list-2"></i>Link</a></li>

</ul>

Add below:

Code:

<li><a href="javascript:;"><i class="icon-list-2"></i><span>More</span></a>

<ul class="submenu">

<li><a href="javascript:;"><i class="icon-list-2"></i>Link</a></li>
<li><a href="javascript:;"><i class="icon-list-2"></i>Link</a></li>
<li><a href="javascript:;"><i class="icon-list-2"></i>Link</a></li>
<li><a href="javascript:;"><i class="icon-list-2"></i>Link</a></li>

</ul>

[Snaggle]

Thank you for your help, that has solved my problems!