[THEME] Easy way to add font awesome inside index.template.php ?

Started by Wellwisher, July 31, 2015, 08:10:02 AM

Previous topic - Next topic

Wellwisher

Hello SMF Devs & community,

I have tired searching for a solution for a few days and now it's been a week. I am struggling to find a more efficient and simple solution.

I require these changes happen inside index.template.php. I feel it will help theme developers and site owners develop sexier and more responsive themes without having to tamper with other non-current-theme related smf files.

I want to be able to easily add font awesome icons to smf nav. I made a custom responsive nav and tested it on my local install. Everything works. I want to visually improve the nav by adding user friendly font nav icons.

1. Without editing Index.English.php
2. Without editing Sources/Subs.php

I know there are different NAV levels to an SMF nav system/ structure i.e firstlevel, sub_buttons with different classes e.g active_button.

Ideally I want something like:

if $button['title'] is "HOME" ADD it inside <i class="fa fa-home"></i>


I beg u help me!


Wellwisher

Hello Illori,

FARM Mod changes the "default menu" to their one plus you cant customize the icons. And my nav is more sexy! The other mod is for posts and other places where BBCode is enabled. I don't see how i can enable BBcode inside a nav menu.

This doesn't solve my problem friend. But thank you. Maybe I wasnt clearier on my message?

Illori

maybe if you look at the CODE for those mods you can find out how to do what you want?

Wellwisher

Quote from: Illori on July 31, 2015, 08:33:12 AM
maybe if you look at the CODE for those mods you can find out how to do what you want?

That's not a bad idea, I will give that a shot now. If I find a solution, I will post my findings in tips and tricks. Thank you mate.

Kindred

for the record, I believe that you CAN customize the icons in the mod code...
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Antes

Open your Index.template.php

Code (Find) Select
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/index', $context['theme_variant'], '.css?fin20" />
Code (Add After) Select
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

Code (Find) Select
<span class="', isset($button['is_last']) ? 'last ' : '', 'firstlevel">', $button['title'], '</span>
Code (Add Before) Select
<i class="fa fa-', $act, ' fa-lg"></i>

rest is up to you :)

Wellwisher

Thank you Illori & Antes,

It was your advise of looking into FARM - Font Awesome Responsive Menu Mod really got me to understand the mechanics of how this mod worked. Turns out, you don't even need this mod as most of the magic is being done in the css files. I learnt you can target list items with Font Awesome within your index.css file using the "content before" attribute:

E.g css snippet of my home button:


.Homefirstlevel::before {
  color: white;
  content: "\f015";
  font-family: FontAwesome;
}


Now all I had to do was add the button titles to the span classes I made. Here was my newbie code which worked but was a little messy @Antes solution is far better:

<span class="nav-click', isset($button['is_last']) ? 'last ' : '',$button['title'], 'firstlevel">', $button['title'], '</span>

@Antes Thank you so much, this small thread is going to help out so many kids. WOW, JUST WOW. OMG, I was orgasming to your response man, this is incredible stuff. This small snippet of code is where the real magic is at my friend. Thank you:

<i class="fa fa-', $act, ' fa-lg"></i>

@Kindred You're right Dev, this can be accomplished via the css files in his authors mod, it would be the FARM.styles that would need editing. Forgive me, but whilst trying to overthink a solution, the notion of adding font awesome via the content:before attribute totally slipped my mind.  :-[


Wellwisher

I can't seem to target the sub button names with:

<i class="fa fa-', $act, ' fa-lg"></i>

It then targets the firstlevel item.

I tried:

<i class="fa fa-', $button['title'], ' fa-lg"></i>

Same result Help please'o??

Wellwisher

I solved it!

TO TARGET SUB MENU ITEMS USE:

<i class="fa fa-', $childbutton['title'], ' fa-lg"></i>  :laugh:

Thank for the code again. If there are modifcations or enhancements please add to this thread. D:

Personally, I feel someone needs to write up a font-awesome tut in the tips and tricks. This is so easy!

Advertisement: