XF 2.1 Some Font Aweseome social icons not working - please help

[Stuart Wright]

Folks, I'm setting up a custom footer in our XF2 sandbox which includes our social links. They use fontawesome icons.
Facebook, Twitter, YouTube and RSS.

This is our XF1 version:

(It' using an older fontawesome).

I've copied the code from the vanilla XF2 PAGE_CONTAINER rss button to create the YouTube, Facebook and Twitter buttons in our XF2 footer

<ul>
  <li class="fb"><a href="https://www.facebook.com/AVForums/" target="_blank" title="facebook.com/avforums">
    <xf:fa icon="fa-facebook" />
    </a></li>
  <li class="tw"><a href="https://twitter.com/avforums" target="_blank" title="twitter.com/avforums">
    <xf:fa icon="fa-twitter" />
    </a></li>
  <li class="yt"><a href="http://www.youtube.com/avforums" target="_blank" title="youtube.com/avforums">
    <xf:fa icon="fa-youtube" />
    </a></li>
  <li class="rss"><a href="{{ link('forums/index.rss', '-') }}" target="_blank" class="p-footer-rssLink" title="{{ phrase('rss')|for_attr }}">
    <xf:fa icon="fa-rss" />
    </a></li>
</ul>

but the first three aren't appearing as they should.


What am I missing?
Thanks

 

[Chris D]

Font Awesome 5 comes with a bunch of different styles - light, regular and solid. For the most part, we use the regular style by default, though you can choose different styles via a style property.

For icons that represent logos, you can't really have different styles of these. You can't really have a "light" (outline) Facebook logo or Twitter logo as it wouldn't then comply with their branding rules.

So these brand icons have been split off into a separate set of icons called "Brand" icons.

The style of icon is dictated by different class names.

fas - solid
far - regular
fal - light
fab - brand

When using the <xf:fa> tag, you don't need to specify the style as it will just use whatever the default style is.

But if you did want to use a different style, you can pass it into the icon attribute, e.g.

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

Using different styles for icons will likely be fairly rare.

But if you are using a brand icon, you do need to pass the fab style into the icon name.

TL;DR:
Pass fab into the relevant icons to ensure it uses the Brands font:

<xf:fa icon="fab fa-facebook" />

 

[SyTry]

Hello,

Have a look here :

XF 2.1 - What's new for developers in XF 2.1?

It's ok, developers, breathe a sigh of relief... We do have some good things for you in XF 2.1 but at a slightly smaller scale than the changes we introduced in XF 2.0 😉 Welcome to the seventh (admittedly developer oriented) "Have you seen...?" thread for XF 2.1. As ever, if you've not yet seen...

xenforo.com

Regards, SyTry