Icon Problem

[Malek-K]

Hello @abias,

Thanks a lot for this plugin, which I just discovered, and so helpful.

I'm presently using Moodle 3.11, with the Moove Theme, and I supposed your plugin would work on it as it's a Boost child.

Still, I'm having some issues with it, and I wondered if you could help :

1. Same as those people in this Moodle Thread , I have only one icon showing, the folder, doesn't matter the fa-icon I'm trying to use. Here's my config for "custom root nodes for all users" : Crédits 1|https://mywebsite/local/staticpage/view.php?page=credits#63%22target=%22_blank||||||fa-pencil

I've tried it the admin section and in the bottom section, and the behavior is the same.

2. I can't seem to create a hierarchy, all the folders remain at the same level just like so : Site administration quicklinks|/admin/search.php|en -List of users|/admin/user.php||||||fa-users -Manage courses|/course/management.php||||||fa-graduation-cap -Capability overview|/admin/tool/capability/index.php||||||fa-check-square-o -Notifications|/admin/index.php||||||fa-wrench

Do you have any clue about what's happening here ?

I've been through your closed ticket but couldn't find any solution there.

Thank you again for your great work, I definitely feel it should be in Moodle's core.

Best Regards.

Malek

[Malek-K]

Hello again !

So I've tried with another Boost theme, Academi, that I use for my mobile version, and this time the icon shows without any problem : Yet, the indentation doesn't work either here...

Well, this ought to be a problem with the Moove theme...

Hoping that you might have a solution, I wish you the best !

Regards.

[Netmees]

I have the same issue with icon management on moove theme

any soluction?

[izendegi]

This definitively is not a local_boostnavigation problem.

The issue is that instead of using FontAwesome icons Moove uses Simple Line Icons:

https://simplelineicons.github.io/

We've workarounded this by adding to _thememoove | scss some code like this one to map each localboost node icon with a SimpleLineIcon:

[data-key="localboostnavigationcustombottomadminsmanageusers"] a::before {
    content: "\e000" !important;
}

where "data-key" is the identifier of the node and "content" is an attribute of each icon of the website linked above (both can be found using browser dev tools)

[Malek-K]

Hi there, I used the same solution as @izendegi, suggested on the moodle forum. For the hierarchy, I finally didn't go with it ^^".

[jasimp]

Hi any one found a solution for this?

[christianwolters]

Hi @jasimp,

please see the answers (and workaround) above. It seems, that this issue is caused by the moove theme as it is using a different icon set.

Cheers Christian

[jasimp]

@christianwolters , i couldnt execute this @izendegi , Could you please elaborate little more how to add this work around to the code and make this workable

thank you both

[Malek-K]

@jasimp :

1 - Decide what icon you want to use. Go to the link from @izendegi : https://simplelineicons.github.io/ and copy the name of the icon you need. Here I'll be using .icon-phone.

2 - Find the corresponding code value. If you don't find it using the previous method, you can go to this URL, then search for the name of the icon

3 - As stated in the answer from Nyasha Kapfumvuti on the moodle link I've shared before, :

" Each icon in the nav drawer uses a CSS selector that can be overriden using something like this: [data-key="localboostnavigationcustomrootusers5"] a::before { content: "\e065" !important; } or [data-key="localboostnavigationcustomrootadmins1"] a::before { content: "\e09a" !important; } or [data-key="13"] a::before { display: none !important; }

You will have to use your browser inspector to see what each item's selector is. Remember that there may be additional ones that are displayed inside courses, so be sure to check. "

Here's my way to find the "data key" : In your web browser (I'm using Brave, it should work with Chrome/Edge) Right click on the icon you have to change and select Inspect :

Then, in the right panel that opens, scroll down in the styles tab to find the "Pseudo ::before element". You'll see the data key between []

4 - Go to your Site Admin > Presentation > Moove/boost theme In the Advanced Tab, use the code as described by @izendegi :

And there you go. Your icon should be changed.