XF 2.1 FontAwesome CSS pseudo elements not working after 2.1 upgrade

[Jean-Baptiste]

Hello,

I know 2.1 made some changes with FontAwsome.

Now, CSS pseudo elements are not working anymore.

Here is an example :

And here was the original CSS :

.p-navEl [data-nav-id=forums]:before{
     font-family: FontAwesome;
     content: "\f27a";
     padding-right: 5px;
}

Any ideas on how to fix this ?

Best regards,
Jean-Baptiste

 

[nrep]

Give this a try :

.p-navEl [data-nav-id=forums]:before{
     font-family: 'Font Awesome 5 Pro';
     content: "\f27a";
     padding-right: 5px;
}

 

[Arty]

Also add this because there are multiple font weights available:

font-weight: min(@xf-fontAwesomeWeight, @faWeight-regular);

 

[Jean-Baptiste]

Working great, thanks @nrep and @Arty

 

[Chris D]

Also add this because there are multiple font weights available:

font-weight: min(@xf-fontAwesomeWeight, @faWeight-regular);

That wouldn't be correct. If you have your Font Awesome weight style set to solid, then the icons would end up being regular weight.

We'd recommend doing something similar to this instead:

.p-navEl [data-nav-id=forums]:before{
   .m-faBase();
   .m-faContent("\f27a");
   padding-right: 5px;
   vertical-align: middle;
}

The vertical alignment is optional but it looks a bit off to me without it.

 

[Jean-Baptiste]

'Font Awesome 5 Pro'

Also add this because there are multiple font weights available:

font-weight: min(@xf-fontAwesomeWeight, @faWeight-regular);

That wouldn't be correct. If you have your Font Awesome weight style set to solid, then the icons would end up being regular weight.

We'd recommend doing something similar to this instead:

.p-navEl [data-nav-id=forums]:before{
   .m-faBase();
   .m-faContent("\f27a");
   padding-right: 5px;
   vertical-align: middle;
}

The vertical alignment is optional but it looks a bit off to me without it.

And how can I do for FontAwesome 4 icons ?

 

[Chris D]

XF 2.1 doesn't support Font Awesome 4 anymore.

 

[Arty]

And how can I do for FontAwesome 4 icons ?

Wait until I release Iconify integration for XenForo and you'll be able to use Font Awesome 4 in XF 2.1 styles (and many other icons!)

 

[nrep]

We'd recommend doing something similar to this instead:

.p-navEl [data-nav-id=forums]:before{
.m-faBase();
.m-faContent("\f27a");
padding-right: 5px;
vertical-align: middle;
}

For some reason, if I try to use the Twitter icon using this code it doesn't work (f099). It does work with other icons that I've tried.

Any thoughts on why that may be?

 

[Chris D]

You'd need to use .m-faBase('Brands'); for anything that is now a brand icon.

 

[Arty]

Twitter icon is in fa-brands font. You need to use

.m-faBase('Brands');

edit: seconds too late

 

[nrep]

Thanks guys, that works great .

 

[Sonnie]

This did not work for me... any other ideas?

 

[Chris D]

Probably need more details. Which icon, what’s the current code etc

 

[Sonnie]

All icons everywhere... all the font-awesome icons.... in the forum and in admin cp.

Disabling all add-ons does not fix them.

This is after upgrading from 1.5 to 2.1.

 

[Paul B]

To follow up, this has now been resolved.

It was due to corrupt woff/woff2 files.

 

[btmgreg]

How can I make a fa icon solid in appearance? This is my current css

.label.label--btmTabloid
{
&:before {
.m-faBase();
.m-faContent("\f619");
color: white;
padding-right: 5px;
vertical-align: middle;
}
}

 

[Chris D]

Add font-weight: 900;

 

[btmgreg]

Add font-weight: 900;

Thank you