XF2.3 FA syntax

[Alpha1]

I had Font Awesome icons in the XB footer blocks (Custom HTML) with the following syntax:
<li><a href="/help/privacy-policy"><i class="fa fa-shield fa-fw"></i> Privacy</a></li>
This no longer works. I've tried some things, but none work. What syntax should I use to make it work?

 

[creaky]

I've used this and seems to work

XF 2.3 - Boosting performance in XenForo 2.3

In today's 'Have you seen...?' entry for XenForo 2.3 we're going to look at how we've zeroed in on enhancing performance, ensuring your community has a swift and seamless experience. We're going to take a deep dive into the advancements we've made and how they stack up against various...

xenforo.com

<a href="forums/-/create-thread" data-xf-click="overlay" class="widget-button"><xf:fa icon="fas fa-edit" /></i> Create post</a>

 

[Russ]

I've used this and seems to work

XF 2.3 - Boosting performance in XenForo 2.3

In today's 'Have you seen...?' entry for XenForo 2.3 we're going to look at how we've zeroed in on enhancing performance, ensuring your community has a swift and seamless experience. We're going to take a deep dive into the advancements we've made and how they stack up against various...

xenforo.com

<a href="forums/-/create-thread" data-xf-click="overlay" class="widget-button"><xf:fa icon="fas fa-edit" /></i> Create post</a>

XF syntax won't work on the footer properties, unfortunately.

I had Font Awesome icons in the XB footer blocks (Custom HTML) with the following syntax:
<li><a href="/help/privacy-policy"><i class="fa fa-shield fa-fw"></i> Privacy</a></li>
This no longer works. I've tried some things, but none work. What syntax should I use to make it work?

The easiest approach would be to set the footer block # content to the Custom template and apply the the HTML to the template.

XF Syntax will work there:

<xf:fa icon="fas fa-edit" />

 

[Alpha1]

Thanks!

This is the setup of my footer code:

<h3 class="collapseTrigger collapseTrigger--block" data-xf-click="toggle" data-target="< :next">Sitelinks</h3>
<ul class="footerList">
    <li>><xf:fa icon="far fa-comment"/> 1.7 million contributions</li>
    <li><a rel="nofollow" href="/help/rules"><xf:fa icon="fa fa-exclamation-circle"/> Site Rules</a></li>
</ul>

The first line will start with an '>'. I did not have this in the HTML footer. How do I prevent this sign from showing up?

 

[Russ]

Thanks!

This is the setup of my footer code:

<h3 class="collapseTrigger collapseTrigger--block" data-xf-click="toggle" data-target="< :next">Sitelinks</h3>
<ul class="footerList">
    <li>><xf:fa icon="far fa-comment"/> 1.7 million contributions</li>
    <li><a rel="nofollow" href="/help/rules"><xf:fa icon="fa fa-exclamation-circle"/> Site Rules</a></li>
</ul>

The first line will start with an '>'. I did not have this in the HTML footer. How do I prevent this sign from showing up?

You have an extra > after the first <li> which is causing that.

 

[Alpha1]

Thanks!
How can I display FA icons in the Logo Text?

 

[Russ]

Thanks!
How can I display FA icons in the Logo Text?

That's not supported in the property. Really the new FA icon approach with 2.3 won't work easily in style properties.

You'll need to use CSS inside of extra.less:

.p-header-logo a:before, .p-nav-smallLogo a:before
{
    .m-faContent(@fa-var-rocket)
}

This covers both the desktop + mobile logo in the nav.

 

[Alpha1]

That works nicely. Thanks!