Simple Machines Community Forum

Font Awesome, the iconic font designed for Bootstrap (http://fortawesome.github.io/Font-Awesome/) gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. In a single collection, Font Awesome is a pictographic language of web-related actions and is completely free for commercial use.

Almost 3 years ago, i wrote a plugin for SMF where the user can add own icons next to the menu links Menu Icons 1.0 - page 1 - SMF 2.0.x Modifications - idesign360 (http://idesign360.com/community/index.php/topic,112.0.html) and before that a simple tutorial Add images to the menu - Tutorials - idesign360 (http://idesign360.com/community/index.php/topic,111.0.html)

This time instead of tiredly making or finding icons, we're going to use Font-Awesome icons for our menus. It works on all theme menus default and custom.

Screenshot:

Open /Themes/default/index.template.php and find:

// The ?fin20 part of this link is just here to make sure browsers don't cache it wrongly.
echo '


Add fater:

        <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />


Open Sources/Subs.php and near the bottom of the file, find your menu links. We're going to use the "Help" tab for an example.

'help' => array(
'title' => $txt['help'],
'href' => $scripturl . '?action=help',
'show' => true,
'sub_buttons' => array(
),
),


Go to the icons library and choose an icon of your choice Font Awesome Icons (http://fortawesome.github.io/Font-Awesome/icons/) click and select.

For example, i picked the "icon-lightbulb" and let's insert it in ouw "Help" tab.


'help' => array(
'title' => '<i class="icon-lightbulb"></i> ' .$txt['help'],
'href' => $scripturl . '?action=help',
'show' => true,
'sub_buttons' => array(
),
),


Thats very cool. got it working on my site SMF Helper. Looks real good. Thank you. :)

Zitat von: Bigguy in September 05, 2013, 08:33:40 NACHMITTAGS
Thats very cool. got it working on my site SMF Helper. Looks real good. Thank you. :)

Thanx bigguy, glad ya like. i dig it too ;)

Zitat von: Bigguy in September 05, 2013, 08:33:40 NACHMITTAGS
Thats very cool. got it working on my site SMF Helper. Looks real good. Thank you. :)

Right on! just saw it. Looking good!

Thanks. Tried to get it to work with sub menus but for some reason It wouldn't...I have had a couple beer tonight though so, lol. :)

Zitat von: Bigguy in September 05, 2013, 09:22:21 NACHMITTAGS
Thanks. Tried to get it to work with sub menus but for some reason It wouldn't...I have had a couple beer tonight though so, lol. :)

it should be about the same. Tho' i have not tried it. http://idesign360.com/community/index.php/topic,135.0.html

I thought it would be to. Also I have Simple portal installed and I had to do a bit of playing to get it to work with the forum button. But As you see it is working so I will keep playing and maybe get sub menus to. :)

It has to be about the same:
'title' => '<i class="icon-lightbulb"></i> ' .$txt['summary'],

... Ya I saw you figured it with SP. that was a pain when I did the icon menu mod. Lol

The beers are piling up so maybe I will tackle that tomorrow over coffee, lol. Very nice idea though. :)

Thanks for sharing, these are sort of like webdings, right?

I saw it coming already Mick. ;)
(You were experimenting with them on your site form long)

Hello,

Please can you update the images or share proper links to see the example's since this is an old topic?
Thanks! :)

I don't have tis installed anymore. Also, this thread is like 6 years old. I doubt anyone has it installed.

Yeah... but still this is amazing feature to have and therefor I have asked if anyone has examples?

Zitat von: pocttopus in August 02, 2019, 08:00:55 VORMITTAG
Yeah... but still this is amazing feature to have and therefor I have asked if anyone has examples?

If you check Mick's website they're all there my friend.
https://www.idesignsmf.com/index.php
The concept is there, but his menu is modified for his site's purpose.