font awesome VERSION 5 UPDATE

huemanfoo
(@huemanfoo)

6 years, 1 month ago

You can now also use font awesome VERSION 5 with this plugin!
(There are many new free icons that won’t show otherwise)

Simply paste the new CDN in the Font Awesome 4 Menus SETTINGS:

Load Font Awesome 4 From: A custom location: https://use.fontawesome.com/releases/v5.0.8/css/all.css

Note that the fa prefix has been deprecated in version 5.
If you have the fa classes structured in your menu items as follows:

[fa fa-users]

then the default font of your menu items seems to be broken and instead uses what looks like ‘times new roman’. To fix this, remove “fa” in the classes like so:

[fa-users]

It works!

HOWEVER – there seems to be a bug:

The new default prefix is the fas solid style and the fab style for brands.
At the moment, none of these prefixes seem to work!

[fas] AND [fab] seem to break the default font too 🙁

SO, for now, you can only use any of the solid font awesome icons from here:
https://fontawesome.com/icons?d=gallery&s=solid&m=free

Unless somebody knows a fix for this too?

Just thought i would share this as its a really great plugin!
Thanks to the author and of course font awesome 🙂

Viewing 5 replies - 1 through 5 (of 5 total)

simontec
(@simontec)

5 years, 8 months ago

Hello,
To fix issues with https://use.fontawesome.com/releases/vXXX/css/all.css
You just need to modify the file : n9m-font-awesome-4.php

line 164 : ” array_unshift( $classes, ‘fa’ );”
to : ” array_unshift( $classes, ‘fas’ );”

Thanks,
Simon

Kaarthi
(@vskaarthi)

5 years, 3 months ago

Thanks Simon for the work around. Works like a charm. Anyone tried Font Awesome official plugin? It didn’t work for me. Having conflicts with theme and some icons.
cogdog
(@cogdog)

5 years, 3 months ago
I tried a slightly different approach than Simon- his code will insert fas classes on all menu items, restricting it to just those icons.

Instead, I commented out lines 164-166:
```
       /*
        if( !in_array( 'fa', $classes ) ){
            array_unshift( $classes, 'fa' );
        }
        
        */
```
and now I used explicitly the full classes from font awesome, e.g.
```
fab fa-flickr
fas fa-arrows-alt
far fa-clock
```
and it seems to work (well some CSS adjustments needed as the icons were small and italic).
cogdog
(@cogdog)

5 years, 3 months ago

FWIW I made a run at a rewrite of the plugin to be compatible with Font Awesome 5 icons
https://github.com/cogdog/font-awesome-5-menus

The menu classes are working good. I don’t use the shortcodes, so have not tested them, but if that’s what I needed I’d opt for the official Font Awesome Plugin.

Kaarthi
(@vskaarthi)

5 years, 2 months ago

Working plugin being abandoned. Sad times we live in 😉