XF 2.0 How to change button icon?

0ptima

Well-known member
Id like to change the lightning bolt icon to a different Font Awsome icon

192616

Here is the code

<xf:button href="{{ link('addon') }}" icon="bolt"> New </xf:button>

I want to change the bolt to this

However, changing the icon to stopwatch does not work
<xf:button href="{{ link('addon') }}" icon="stopwatch"> New </xf:button>

Do I need to do something else to make it appear?
 
Im trying to use the this pro icon

and get this

192634

Code in extra.less

.button.button--icon--stopwatch>.button-text:before, a.button.button--icon--stopwatch>.button-text:before { content: "\f2f2"; display: inline-block; width: 1em; }


<xf:button href="{{ link('addon') }}" icon="stopwatch"> New </xf:button>
 
Not really sure how much of an impact an older browser should have. I think generally it would be "all or nothing" rather than only falling over on specific icons.

Code in extra.less

.button.button--icon--stopwatch>.button-text:before, a.button.button--icon--stopwatch>.button-text:before { content: "\f2f2"; display: inline-block; width: 1em; }


<xf:button href="{{ link('addon') }}" icon="stopwatch"> New </xf:button>
This is likely part of the issue. As you have already found, we don't support an icon value of "stopwatch". I'm not 100% sure why it wouldn't work (it's possible that because it's an unrecognised value, we don't actually give it the button--icon--stopwatch class). Correct me if I'm wrong, but I believe you're wanting to add an entirely separate button rather than modifying the new posts button which is where Emre's suggestion comes from.

For a custom button (or even to modify an existing button through a template edit rather than CSS) we added something to help in XF 2.1.
HTML:
<xf:button href="{{ link('addon') }}" fa="fa-stopwatch"> New </xf:button>
That should work.

The older icon approach is somewhat deprecated now unless the usage of an icon should also provide the button text automatically, e.g. we'll carry on using this:
HTML:
<xf:button href="" icon="delete" />
(Because it will automatically use the button.delete phrase.

But for new buttons where we don't get the automatic phrase we'd likely just use this going forward:
HTML:
<xf:button href="" fa="fa-bolt">New posts</xf:button>
 
Not really sure how much of an impact an older browser should have. I think generally it would be "all or nothing" rather than only falling over on specific icons.
I think that's right. But for me, when I changed the node icons which always rendered on the old chrome browser before, now they do not. So, I thought maybe he was having the same type deal.
 
Last edited:
Not really sure how much of an impact an older browser should have. I think generally it would be "all or nothing" rather than only falling over on specific icons.


This is likely part of the issue. As you have already found, we don't support an icon value of "stopwatch". I'm not 100% sure why it wouldn't work (it's possible that because it's an unrecognised value, we don't actually give it the button--icon--stopwatch class). Correct me if I'm wrong, but I believe you're wanting to add an entirely separate button rather than modifying the new posts button which is where Emre's suggestion comes from.

For a custom button (or even to modify an existing button through a template edit rather than CSS) we added something to help in XF 2.1.
HTML:
<xf:button href="{{ link('addon') }}" fa="fa-stopwatch"> New </xf:button>
That should work.

The older icon approach is somewhat deprecated now unless the usage of an icon should also provide the button text automatically, e.g. we'll carry on using this:
HTML:
<xf:button href="" icon="delete" />
(Because it will automatically use the button.delete phrase.

But for new buttons where we don't get the automatic phrase we'd likely just use this going forward:
HTML:
<xf:button href="" fa="fa-bolt">New posts</xf:button>
Hello,
Can you guide me on how to create a button with fa icon toggle when clicking?
Example:
Before click:
1698997664399.webp
After click:
1698997675201.webp
Thank you.
 
Last edited:
Back
Top Bottom