XF 2.0 How to change button icon?

[0ptima]

Id like to change the lightning bolt icon to a different Font Awsome icon



Here is the code

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

I want to change the bolt to this

Font Awesome

fontawesome.com

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?

 

[Emre]

Is that what you want to do?

I used fontawesome 5

 

[0ptima]

yes. Where do I edit the CSS?

 

[Emre]

@0ptima ,
extra.less add code;

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

Demo;


icon if you want to change: content: "\f086"; Url https://fontawesome.com/icons?d=gallery&q=message&m=free

 

[0ptima]

Thanks that worked. Do we have access to the pro version with XF?

 

[SyTry]

Thanks that worked. Do we have access to the pro version with XF?

Yes :

XF 2.1 - Font Awesome 5, Editor button management, Markdown support and more!

We did say we'd see you again fairly soon and so here we are, hot on the heels of our push notifications announcement, to bring you an update on several more new features and improvements coming in XenForo 2.1. Remember, to ensure you're kept up to date, we strongly recommend smashing the...

xenforo.com

 

[0ptima]

Im trying to use the this pro icon

Font Awesome

fontawesome.com

and get this



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>

 

[Max Taxable]

and get this

Older chrome browser by chance?

 

[0ptima]

Older chrome browser by chance?

That would make sense as its a my local dev box and have not updated the browser.

 

[Chris D]

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.

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

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

<xf:button href="" fa="fa-bolt">New posts</xf:button>

 

[Emre]

Thanks, @Chris D , This application is easier

 

[Max Taxable]

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.

 

[0ptima]

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

Thanks, that is correct.

 

[ZixDev]

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.

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

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

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

After click:

Thank you.