Loading...
 
Skip to main content

Features / Usability

Forum List Topic List

Forums » Features / Usability » Unable to configure 'Font Awesome' Icons in Menu
 
Thread actions
Print this page
  • Print all pages

    • Unable to configure 'Font Awesome' Icons in Menu

    Posted by Mike Finko posts: 228 Ukraine

    Hi,

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

    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

    Reads: 1479
    Posted by Bernard Sfez / Tiki Specialist posts: 8654 France

    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

    Posted by Mike Finko 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

    Posted by Bernard Sfez / Tiki Specialist posts: 8654 France

    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.