Using Font-Awesome Icons With Simple Machines

Started by Mick., September 05, 2013, 07:55:59 PM

Previous topic - Next topic

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:

// 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 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(
),
),

Bigguy

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

Mick.

Quote from: Bigguy on September 05, 2013, 08:33:40 PM
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.

Quote from: Bigguy on September 05, 2013, 08:33:40 PM
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.

Quote from: Bigguy on September 05, 2013, 09:22:21 PM
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:
'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

Quote from: pocttopus on August 02, 2019, 08:00:55 AM
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.

Advertisement: