Loading...
 
Features / Usability

Features / Usability


Unable to configure 'Font Awesome' Icons in Menu

posts: 228 Ukraine

Hi,

Help me resolve this and I will continue to improve the documentation for this feature wink

I am trying to have 'font awesome' Icons display in my menu (which is in the 'Top bar' module) instead of text. I followed all the instructions here (which I edited a little, mostly for grammar, and, added a screenshot): http://doc.tiki.org/Menu?latest=1#Add_icons_to_each_option_of_a_menu however, the icons still do not display. I also looked for clues on the Plugin Icon page https://doc.tiki.org/Pluginicon where there is some 'coding' type functions listed at the top, however none seem to apply (or, at least I don't understand how or where to apply them).

I checked in my 'img/icons/large' folder and could not find the 'font-awesome' icons. In fact, I checked all the folders where my site is and there are no 'font awesome' icons anywhere. I don't believe this is the issue as I have put 'PluginIcon' on a wiki page and they work fine. Or, maybe the 'path' to the folder is incorrect - I am using only 'img/icons/large' nothing more (well, I also tested with 'mysite/img/icons/large', no result), but maybe it needs to be longer? I am on shared hosting so do not understand what would go before this (I repeatedly have issues with the 'path').

I also tried adding the name of a file in the 'img/icons/large' folder, both short name ('home48x48') and long ('home48x48.png') (cleared cache many time in between) and that did not work either. For, Font Awesome I tried adding in the menu option 'home' or 'shopping-cart', neither of which worked.

What am I doing incorrectly?

Thanks,
Mike
p.s. testing on Tiki 21.2

posts: 8633 Israel

Hello Mike,

Here my "formula";
Edit the menu and enable "Wiki Parse"
Edit the menu option and use a DIV plugin to include your fontawesome icon:

Copy to clipboard
{DIV(type="span" class="text-capitalize")}{icon name="users-cog" size="2"}%%%{TR()}team{TR}{DIV}


As you can see there is more here than just an icon (class, size and carriage return) but that gives you an idea of what you can do... (looking at that, the next step should be to hide the menu label only when used on small screens... one day ?)

Hope this helps,
B

posts: 228 Ukraine

Hi Bernard,

Thanks for providing this method, I will give it a try. Only I was looking for the way to do this that seems to be built-in to Tiki and does not involve custom html/css coding skills.

I get the impression that filling in the 'Icon' field (in the GUI of the menu option you would like to have an Icon displayed), is all you need to do:

Screenshot From 2020 09 02 11 29 29

(assuming you have already set up the menu in a module)

The correct names of all the Icons can be found here: https://doc.tiki.org/PluginIcon

Maybe there is a bug?

br,
Mike

posts: 8633 Israel

Welcome Mike

Some remarks;

I couldn’t find a way to use the "icon" parameter (may be a bug... but it is 10 versions I didn’t try ?)

Not all the fontawesome icons are available using the pluginIcons and I also use directly html code.


Upcoming Events

1)  18 Apr 2024 14:00 GMT-0000
Tiki Roundtable Meeting
2)  16 May 2024 14:00 GMT-0000
Tiki Roundtable Meeting
3)  20 Jun 2024 14:00 GMT-0000
Tiki Roundtable Meeting
4)  18 Jul 2024 14:00 GMT-0000
Tiki Roundtable Meeting
5)  15 Aug 2024 14:00 GMT-0000
Tiki Roundtable Meeting
6)  19 Sep 2024 14:00 GMT-0000
Tiki Roundtable Meeting
7) 
Tiki birthday
8)  17 Oct 2024 14:00 GMT-0000
Tiki Roundtable Meeting
9)  21 Nov 2024 14:00 GMT-0000
Tiki Roundtable Meeting
10)  19 Dec 2024 14:00 GMT-0000
Tiki Roundtable Meeting