Simple Machines Community Forum

Customizing SMF => Tips and Tricks => Topic started by: Mick. on September 05, 2013, 07:55:59 PM

Title: Using Font-Awesome Icons With Simple Machines
Post by: Mick. on September 05, 2013, 07:55:59 PM
(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fidesign.idesign360com.netdna-cdn.com%2Fimages%2Ffontawesome.png&hash=bcee8d8dbe6c4a65ac2821298f8232df)

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:
(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fidesign.idesign360com.netdna-cdn.com%2Fimages%2Ffw.png&hash=613bd0dbcd7e252ffa656bdb031eac9c)

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

Code: [Select]
'help' => array(
'title' => '<i class="icon-lightbulb"></i> ' .$txt['help'],
'href' => $scripturl . '?action=help',
'show' => true,
'sub_buttons' => array(
),
),
Title: Re: Using Font-Awesome Icons With Simple Machines
Post by: 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. :)
Title: Re: Using Font-Awesome Icons With Simple Machines
Post by: Mick. on September 05, 2013, 09:01:26 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 ;)
Title: Re: Using Font-Awesome Icons With Simple Machines
Post by: Mick. on September 05, 2013, 09:03:12 PM
Thats very cool. got it working on my site SMF Helper. Looks real good. Thank you. :)
Right on! just saw it. Looking good!
Title: Re: Using Font-Awesome Icons With Simple Machines
Post by: 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. :)
Title: Re: Using Font-Awesome Icons With Simple Machines
Post by: Mick. on September 05, 2013, 09:36:36 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
Title: Re: Using Font-Awesome Icons With Simple Machines
Post by: Bigguy on September 05, 2013, 09:42:05 PM
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. :)
Title: Re: Using Font-Awesome Icons With Simple Machines
Post by: Mick. on September 05, 2013, 09:49:21 PM
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
Title: Re: Using Font-Awesome Icons With Simple Machines
Post by: Bigguy on September 05, 2013, 09:54:23 PM
The beers are piling up so maybe I will tackle that tomorrow over coffee, lol. Very nice idea though. :)
Title: Re: Using Font-Awesome Icons With Simple Machines
Post by: Biology Forums on September 05, 2013, 10:31:47 PM
Thanks for sharing, these are sort of like webdings, right?
Title: Re: Using Font-Awesome Icons With Simple Machines
Post by: Ricky. on September 06, 2013, 12:32:29 AM
I saw it coming already Mick. ;)
(You were experimenting with them on your site form long)
Title: Re: Using Font-Awesome Icons With Simple Machines
Post by: pocttopus on August 02, 2019, 06:49:40 AM
Hello,

Please can you update the images or share proper links to see the example's since this is an old topic?
Thanks! :)
Title: Re: Using Font-Awesome Icons With Simple Machines
Post by: Bigguy on August 02, 2019, 07:55:14 AM
I don't have tis installed anymore. Also, this thread is like 6 years old. I doubt anyone has it installed.
Title: Re: Using Font-Awesome Icons With Simple Machines
Post by: 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?
Title: Re: Using Font-Awesome Icons With Simple Machines
Post by: KBExit on September 27, 2019, 08:31:11 PM
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.