Cannot change fontawesome icon in node icon

[aquarium]

When I change it to anything other than comment, I get an error fa-var-MYICONHERE-alt-lines is undefined in file public:xb.less.

It looks like var is added before the fontawesome icon name so fa-circle looks like fa-var-circle and I'm guessing that is the undefined icon. Wondering if I'm missing something here.

 

[aquarium]

This is a bug in the bolt template. Using a different template there is no issue.

 

[Russ]

Where exactly are you changing this? What value are you changing it to?

We have properties to change the icon here: Style properties -> Node/forum list -> Read/unread node icon. You do not put a fa- in front of it. Additionally, this isn't in the default style, it's properties unique to our styles (possibly other styles do it as well).

 

[aquarium]

I've done the same thing in another template as in Bolt v3. Change it to circle, which is a standard FA icon. I see fa-var-circle-alt-lines as I've mentioned above. The alt-lines is in the template and I can remove it and, if so, it will be fa-var-circle. In other templates the alt-lines may not appear, I assume a styling variable, and it's just comment in the box. I change that to circle and it works perfectly.

 

[Russ]

I'm a little confused. To make sure we're on the same page:

1.) What exactly are you trying to achieve?
2.) Also, what are you currently editing that you feel there's a bug?
3.) Where are you seeing fa-var-circle-alt-lines? circle-alt-lines isn't even an icon

Changing icons, I do not recommend editing templates outside of extra.less. It'll make upgrades far easier if you leave alone the templates as much as possible. Changing an icon can be as simple as adding this to extra.less

.p-navgroup-link.p-navgroup-link--search i:after { content: "\f0ad"; }

That changes the search icon to a wrench. No templates edited directly (other than extra.less which is saved on upgrades).

 

[aquarium]

See below in the Nodes style option.

If I change comment to anything else, problems abound. In the Bolt v3 child theme.

 

[Russ]

So those options definitely work. What values did you try?

I just realized though I need to update the link. It goes to the global Font Awesome icons which is version 6. XF uses only 5:

Find the Perfect Icon for Your Project in Font Awesome 5 | Font Awesome

Search all the Version 5 icons and match your project with a look and feel that's just right. Better yet, try Font Awesome 6 with the all-new Sharp Solid icons.

fontawesome.com

If you were using a Font Awesome 6 icon, it would probably throw an error.

I'll get that patched in the next release (the link in the description)

 

[aquarium]

Perhaps it was using circle with the extensions by replace comment-alt-lines with circle-alt-lines. It spits out fa-var-circle-alt-lines

 

[Russ]

Where are you getting the name circle-alt-lines ? That's not a valid icon name.

Any name from this list will work: https://fontawesome.com/v5/search (unless it's a brand icon which would require additional CSS).

 

[aquarium]

Where are you getting the name circle-alt-lines ? That's not a valid icon name.

Any name from this list will work: https://fontawesome.com/v5/search (unless it's a brand icon which would require additional CSS).

I have no idea how, but this is what imported as default value for Bolt v3. When I remove the -alt-lines and save, it's an edit. When I revert, that's what it reverts to. I'd wait for April 1 to play a better joke than this on you.

 

[aquarium]

Funny thing is I spent a good amount of time trying to figure out what that was and stock FA icons weren't working with what I assumed was more PixelExit wizardry. I just gave up and decided I'd wait to hear from you and discovered another theme was actually going to work out splendidly.

 

[Russ]

I have no idea how, but this is what imported as default value for Bolt v3. When I remove the -alt-lines and save, it's an edit. When I revert, that's what it reverts to. I'd wait for April 1 to play a better joke than this on you. View attachment 13873

comment = a valid Font Awesome icon
comment-alt-lines = a valid Font Awesome icon (and also the Bolt stock icon we use)
circle = a valid Font Awesome icon
circle-alt-lines = isn't an icon therefore won't work (on any style that uses Font Awesome)

Those fields there require a valid Font Awesome icon name, you can't put random values there and expect it to work .

As I mentioned before, these icon names should work there: https://fontawesome.com/v5/search

 

[aquarium]

comment = a valid Font Awesome icon
comment-alt-lines = a valid Font Awesome icon (and also the Bolt stock icon we use)
circle = a valid Font Awesome icon
circle-alt-lines = isn't an icon therefore won't work (on any style that uses Font Awesome)

Those fields there require a valid Font Awesome icon name, you can't put random values there and expect it to work .

As I mentioned before, these icon names should work there: https://fontawesome.com/v5/search

AHA! I knew there was an answer (and that I'd probably be wrong and have egg on my face.) But no, it is NOT random. I was just imitating the master.

Too funny that I was assuming that it was an extension (doh! what the hell was I thinking at 2am... still not sure why it added a var in there.... but I digress. ) But the bright side is that I was completely pushed to a different theme and, dare I say, it has turned out better than I expected and in a better direction that simplifies everything. The organization and flexibility of the PE framework is nothing short of incredible and I think we'll be ready to move forward this weekend. Thanks again, as always.