Advertisement:

Author Topic: Using Font-Awesome Icons With Simple Machines  (Read 12334 times)

Offline Mick.

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 5,032
  • Gender: Male
    • idesignSMF on Facebook
    • @idesign360 on Twitter
    • idesignSMF.com
Using Font-Awesome Icons With Simple Machines
« on: September 05, 2013, 07:55:59 PM »

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

Offline Bigguy

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 12,976
  • Gender: Male
  • Be nice, or else....
    • smfbigguy on GitHub
    • What's Ur Beef
Re: Using Font-Awesome Icons With Simple Machines
« Reply #1 on: September 05, 2013, 08:33:40 PM »
Thats very cool. got it working on my site SMF Helper. Looks real good. Thank you. :)

Offline Mick.

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 5,032
  • Gender: Male
    • idesignSMF on Facebook
    • @idesign360 on Twitter
    • idesignSMF.com
Re: Using Font-Awesome Icons With Simple Machines
« Reply #2 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 ;)

Offline Mick.

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 5,032
  • Gender: Male
    • idesignSMF on Facebook
    • @idesign360 on Twitter
    • idesignSMF.com
Re: Using Font-Awesome Icons With Simple Machines
« Reply #3 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!

Offline Bigguy

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 12,976
  • Gender: Male
  • Be nice, or else....
    • smfbigguy on GitHub
    • What's Ur Beef
Re: Using Font-Awesome Icons With Simple Machines
« Reply #4 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. :)

Offline Mick.

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 5,032
  • Gender: Male
    • idesignSMF on Facebook
    • @idesign360 on Twitter
    • idesignSMF.com
Re: Using Font-Awesome Icons With Simple Machines
« Reply #5 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

Offline Bigguy

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 12,976
  • Gender: Male
  • Be nice, or else....
    • smfbigguy on GitHub
    • What's Ur Beef
Re: Using Font-Awesome Icons With Simple Machines
« Reply #6 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. :)

Offline Mick.

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 5,032
  • Gender: Male
    • idesignSMF on Facebook
    • @idesign360 on Twitter
    • idesignSMF.com
Re: Using Font-Awesome Icons With Simple Machines
« Reply #7 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

Offline Bigguy

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 12,976
  • Gender: Male
  • Be nice, or else....
    • smfbigguy on GitHub
    • What's Ur Beef
Re: Using Font-Awesome Icons With Simple Machines
« Reply #8 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. :)

Offline Biology Forums

  • SMF Hero
  • ******
  • Posts: 3,747
    • StudyForcePS on Facebook
    • @studyforceps on Twitter
Re: Using Font-Awesome Icons With Simple Machines
« Reply #9 on: September 05, 2013, 10:31:47 PM »
Thanks for sharing, these are sort of like webdings, right?

Offline Ricky.

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 4,057
    • Indian Linux Forums
Re: Using Font-Awesome Icons With Simple Machines
« Reply #10 on: September 06, 2013, 12:32:29 AM »
I saw it coming already Mick. ;)
(You were experimenting with them on your site form long)

Offline pocttopus

  • Jr. Member
  • **
  • Posts: 353
  • Low pressure
    • @pocttopus on Twitter
Re: Using Font-Awesome Icons With Simple Machines
« Reply #11 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! :)

Offline Bigguy

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 12,976
  • Gender: Male
  • Be nice, or else....
    • smfbigguy on GitHub
    • What's Ur Beef
Re: Using Font-Awesome Icons With Simple Machines
« Reply #12 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.

Offline pocttopus

  • Jr. Member
  • **
  • Posts: 353
  • Low pressure
    • @pocttopus on Twitter
Re: Using Font-Awesome Icons With Simple Machines
« Reply #13 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?

Offline KBExit

  • Semi-Newbie
  • *
  • Posts: 13
Re: Using Font-Awesome Icons With Simple Machines
« Reply #14 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 [nofollow]
The concept is there, but his menu is modified for his site's purpose.