Topic: Using Font-Awesome Icons With Simple Machines

[Mick.]

Font Awesome, the iconic font designed for Bootstrap 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 and before that a simple tutorial Add images to the menu - Tutorials - idesign360

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:

Code: [Select]

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

Add fater:

Code: [Select]

        <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.

Code: [Select]

'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 click and select.

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

Code: [Select]

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


[Bigguy]

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

[Mick.]

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

[Mick.]

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

Right on! just saw it. Looking good!

[Bigguy]

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.

[Mick.]

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

[Bigguy]

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.

[Mick.]

It has to be about the same:

Code: [Select]

'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

[Bigguy]

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

[Biology Forums]

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

[Ricky.]

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

[pocttopus]

Hello,

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

[Bigguy]

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

[pocttopus]

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

[KBExit]

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 [nofollow]
The concept is there, but his menu is modified for his site's purpose.