XF 2.3 Displaying buttons with only icons

[mjda]

I'm trying to update some things in my add-ons before the official release and I've ran into a small issue.

Before I could use <xf:button href="" class="button--cta"><xf:fa icon="fa-star" /></xf:button> and it'd produce the following, which is what I want.



In XF 2.3, that same code produces this:



Small difference, yes, but it looks silly with that small star compared to the edit icon in the next button over.

I also tried using <xf:button href="" class="button--cta" fa="fa-star" />, but that produced the following, which is even worse.



I'm tempted to say this might be a bug, but I really don't know. In any case, is there a way to get something similar to what I had in XF 2.2 back, with XF 2.3, without making some custom CSS edits?

 

[Jeremy P]

The former supplies the star as if it were the button text, the latter applies it as a proper icon but it looks odd because there isn't any accompanying text.

You probably want:

<xf:button href="" class="button--cta button--iconOnly" fa="fa-star" />

It's probably worth adding some hidden text for accessibility, either with a browser tooltip (title="Star") or nested text (<span class="u-srOnly">Star</span>).

 

[mjda]

The former supplies the star as if it were the button text, the latter applies it as a proper icon but it looks odd because there isn't any accompanying text.

You probably want:

<xf:button href="" class="button--cta button--iconOnly" fa="fa-star" />

It's probably worth adding some hidden text for accessibility, either with a browser tooltip (title="Star") or nested text (<span class="u-srOnly">Star</span>).

It's almost as if you know what you're doing here! Thank you! That worked perfectly.