XF 2.2 Navigation Icons

[tabbytales]

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;
}

 

[beerForo]

You have to choose from the v5 library. XF does not use v6.

 

[beerForo]

Link - regular | Font Awesome

Link in the regular style. Smooth out your design with easygoing, readable icons. Available now in Font Awesome 5.

fontawesome.com

 

[tabbytales]

Thanks for letting me know! I still need help with the actual coding part of it, though, if you would know how to do that as well!

 

[beerForo]

Are you trying to change the lightning bolt in the navigation only? Or also on the new posts button?

 

[tabbytales]

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.

 

[beerForo]

Oh, that looks like where the lightning bolt is on mobile.

Sorry maybe someone can help.

 

[TPerry]

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

.p-navgroup-link.p-navgroup-link--alerts i:after {
content: "\f0f3";
}

The conversations "mail icon" is

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

 

[tabbytales]

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:

 

[TPerry]

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.

[XenConcept] Linked Accounts [Paid]

@XenConcept Is there a demo available? Is there a permission to set how many linked accounts each user group can link? If not, can one be added?

xenforo.com

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

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.

 

[tabbytales]

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]

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.