XF 2.3 Using "u-srOnly" in a phrase with {icon} with XF 2.3?

[Kevin]

With XF 2.0 - 2.2 we could use <i class="fas fa-home"><span class="u-srOnly">Home</span></i> to have an icon in a phrase that was still screen reader friendly. With XF 2.3 the icon tag would now be {icon:fas::home} -- what'd be the best way of incorporating u-srOnly into there?

Something like {icon:fas::home}<span class="u-srOnly">Home</span> maybe?

 

[Deleted member 184953]

<xf:fa icon="fa-var-home" class="u-srOnly" /> Home

Maybe…

 

[Kevin]

<xf:fa icon="fa-var-home" class="u-srOnly" /> Home

Maybe…

I don't think template tags work in phrases; for phrases in XF 2.3 there's a new {icon} tag.



For now I'm going with the {icon:fas::home}<span class="u-srOnly">Home</span> -- when the icon tag is generated at display time it is using aria-hidden="true" so the end result should be that screen readers won't see the icon but will see word Home.

 

[Deleted member 184953]

Sorry, i miss that you want FA icons in phrases.