XF 2.2 How can I Achieve a font awesome navigation system, instead of text?

oO5 Dynasty

Well-known member
This is how i would like my navigation to look, with Tool tips when hovered over, say what the Font Awesome link is.
1639201421676.webp


This is how it looks now.
1639201601459.webp
 
Solution
Here's the example for the Resources navigation tab. Go to Setup > Public Navigation and choose Resources and edit it like this:

Screenshot 2021-12-17 at 9.11.10.webp


Now you'll have only an icon for the navigation tab with a tooltip.
Here's the example for the Resources navigation tab. Go to Setup > Public Navigation and choose Resources and edit it like this:

Screenshot 2021-12-17 at 9.11.10.webp


Now you'll have only an icon for the navigation tab with a tooltip.
 
Solution
Not using labels when using icons is an extremely bad idea. Here is an (dated) article that points out the issues: https://www.nngroup.com/articles/icon-usability/

Unless it is something that is instantly recognizable (attachment icon, editor icons) it is never a good idea to remove the label.

If it is being done from a stand point of needing more space for the navigation, look at using Bolt by @Russ / @Pixel Exit as he probably has the better side navigation system currently. I can provide you the CSS (Maybe template mods, can't remember) changes I made to make the navigation collapse to icon, rather than hiding completely. The difference when removing label with this is that the default is to show the label, and people can choose if they want to collapse or not (I normally do, but I also use my site 24/7).

1639730606618.webp
 
Not using labels when using icons is an extremely bad idea. Here is an (dated) article that points out the issues: https://www.nngroup.com/articles/icon-usability/

Unless it is something that is instantly recognizable (attachment icon, editor icons) it is never a good idea to remove the label.

If it is being done from a stand point of needing more space for the navigation, look at using Bolt by @Russ / @Pixel Exit as he probably has the better side navigation system currently. I can provide you the CSS (Maybe template mods, can't remember) changes I made to make the navigation collapse to icon, rather than hiding completely. The difference when removing label with this is that the default is to show the label, and people can choose if they want to collapse or not (I normally do, but I also use my site 24/7).

View attachment 262065
Thank you for the information, and I get it.
This is something I do wanna try, and if it doesn't work, I can revert the edits.
 
For some reason, I can not edit the title because It is not clickable.
I think that's because, as a default nav item you have to change the phrase Resources. Maybe it can be done in development mode though, I haven' checked. [EDIT: yes, that does seem to be the case]

Otherwise create a new alternative custom nav item with a link to resources. It will need a different id but you can then add your own Title
 
I think that's because, as a default nav item you have to change the phrase Resources. Maybe it can be done in development mode though, I haven' checked. [EDIT: yes, that does seem to be the case]

Otherwise create a new alternative custom nav item with a link to resources. It will need a different id but you can then add your own Title
Big Thank You
 
Back
Top Bottom