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

[oO5 Dynasty]

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



This is how it looks now.

 

[BassMan]

Here's the example for the Resources navigation tab. Go to Setup > Public Navigation and choose Resources and edit it like this:




Now you'll have only an icon for the navigation tab with a tooltip.

 

[Forsaken]

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).

 

[oO5 Dynasty]

Here's the example for the Resources navigation tab. Go to Setup > Public Navigation and choose Resources and edit it like this:

View attachment 262062


Now you'll have only an icon for the navigation tab with a tooltip.

For some reason, I can not edit the title because It is not clickable.

 

[oO5 Dynasty]

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.

 

[Mr Lucky]

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

 

[Kruzya]

For some reason, I can not edit the title because It is not clickable.

Because all navigation entries creates a phrase for title, and on this form you see master-version. You can edit phrase instead editing of navigation entry. nav.xfrm in this case.

 

[oO5 Dynasty]

Here's the example for the Resources navigation tab. Go to Setup > Public Navigation and choose Resources and edit it like this:

View attachment 262062


Now you'll have only an icon for the navigation tab with a tooltip.

Thank You Soooooooooooooooooooooooooooo Much

 

[oO5 Dynasty]

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

 

[BassMan]

For some reason, I can not edit the title because It is not clickable.


View attachment 262084

Yes, sorry, I was in development mode. Just use the approach from @Mr Lucky or @Kruzya.

 

[oO5 Dynasty]

Because all navigation entries creates a phrase for title, and on this form you see master-version. You can edit phrase instead editing of navigation entry. nav.xfrm in this case.

Thank you soooo much

 

[Old Nick]

I tried this once and in google search results I got pages referenced with title <i class="far fa-xxxxx"></i>

 

[oO5 Dynasty]

Thank you for the help everybody, I got it to work.