XF 2.2 Navigation Icons

tabbytales

New member
I am not entirely sure about correct terminology here, sorry, I'm still incredibly new to all of this stuff. But there's an addition to my navigation that doesn't want to show its button. I've currently gotten it to use a simple circle, just to show that it is indeed there, but I can't figure out how to use a Font Awesome icon the way the rest of them show. If anyone could help me out, it would be greatly appreciated. I'm hoping to use link-simple.

It's the silly little circle, which I put in via this in extra.less:
.p-navgroup-link.p-navgroup-link--linked i:after {
content: "\2B58";
width: 1em;
display: inline-block;
text-align: center;
}
1664030663740.png
 

tabbytales

New member
I'm not trying to change the lightning bolt at all! It's an entirely different... menu, I guess? For better access to something from an add-on. I just have to change that code in extra.less to allow me to use the FA icon, but I don't know the code to accomplish that. So it would only be in the navigation, I suppose.
 

Tracy Perry

Well-known member
I'm not trying to change the lightning bolt at all! It's an entirely different... menu, I guess? For better access to something from an add-on. I just have to change that code in extra.less to allow me to use the FA icon, but I don't know the code to accomplish that. So it would only be in the navigation, I suppose.
Well, what you are trying to "change" is going to be very specific... that's like the alert bell is
Code:
.p-navgroup-link.p-navgroup-link--alerts i:after {
content: "\f0f3";
}

The conversations "mail icon" is
Code:
.p-navgroup-link.p-navgroup-link--conversations i:after {
content: "\f0e0";
}

So it depends on what exactly is putting the icon you are wanting to change there.... and simply looking at an image of it won't do any good, you have to actually examine the CSS code it is currently using to target it appropriately. Is that being placed there by an add-on or a template edit currently? Can it be viewed by guests? If so, a link to the site would be beneficial.
And as was earlier stated, you have to use version 5 FA icons... and usually the earlier the better. The one you are wanting to use is a v6 one.

OK.. did some sleuthing... I'm assuming you are trying to modify the default icon that XenConcept Linked Accounts add-on places there?
If so, adding an !important like this content: "\2B58" !important;. It is not usually suggested, but short of editing the template that the add-on uses, it is needed.
 
Last edited:

tabbytales

New member
There is no default icon, which is my problem! Without a code, there is no symbol whatsoever. I'm not trying to change one, really, but just... add one. The \2B58 is what gave me the circle there. Rather than the circle, I would like an actual FA icon. I just don't know how to code in FA icons. I managed to cheese in the circle.

The code that is in the Linked Accounts add-on discussion is this:
.p-navgroup-link--linked i:after
{
<xf:macro template="uix_icons.less" name="content" arg-icon="link" />
}

Which did not work. It left the same blank space that I'm trying to get rid of now. When I put that code in extra.less, or leave it entirely blank, what shows up is this:
1664109791476.png
 

Tracy Perry

Well-known member
There is no default icon, which is my problem! Without a code, there is no symbol whatsoever. I'm not trying to change one, really, but just... add one. The \2B58 is what gave me the circle there. Rather than the circle, I would like an actual FA icon. I just don't know how to code in FA icons. I managed to cheese in the circle.

The code that is in the Linked Accounts add-on discussion is this:


Which did not work. It left the same blank space that I'm trying to get rid of now. When I put that code in extra.less, or leave it entirely blank, what shows up is this:
View attachment 273835
Once more...looking at a simple image to your site isn't that big of a help.
I'll repeat, a link to the site, and if needed to see what you are referring to, a test account would help.
If it's from that add-on I mentioned, I personally am not going to go out and buy a copy simply to trouble shoot your icon.
You could always post in that add-on thread for specific help.
It does look like you may have partially answered your own question... did you ever examine the uix_icons.less that you gave in your code sample to see what argument it uses for link?

EDIT:
In fact, if you HAD read through that discussion thread for the add-on, you would have found this just a few posts up from your first post in that thread on 06/21/2022.


Which the developer of that addon specifically tells how to fix someones style not showing the icon by using the below code in their EXTRA.less

Code:
p-navgroup-link--linked i:after
{
    .m-faBase();
    display: inline-block;
    min-width: 1em;
    .m-faContent(@fa-var-link);
}

When having an issue with something like this (or even an add-on) I would highly encourage you to FULLY read the entire support thread to see if that issue has already been addressed.
 
Last edited:

tabbytales

New member
Ah, as I've mentioned in that same support thread, that fix actually did not help me. Which is why I've been trying to figure it out myself. Thank you, though! I appreciate that you're trying to help me! The only reason that I haven't provided a link to my site is because I'm rather shy about sharing it publicly. If you could let me know what exactly you're looking for, I might be able to better help you, or I could send a link privately if you truly need it.

And I would like to clarify that I have indeed read through the entire support thread and asked there (as you can see here) but did not receive a response, which is why I turned to the community.
 

tabbytales

New member
I finally figured it out on my own so this thread is no longer necessary, but I just wanted to reply again and say thanks for trying to help with the limitations of my lack of knowledge / unwillingness to publicize the site. Hope you have a fantastic day. :)
 
Top