[Resolved] Using font awesome icons as bullets

[David]

Aah ok – so are you loading FontAwesome elsewhere as GP doesn’t include it by default. This document covers how to by adding the Better Font Awesome plugin which fine for the icon you are trying to use ( ie. you don’t need Font Awesome 5)

https://docs.generatepress.com/article/font-awesome/

[Pete]

My font awesome is working fine as all my other font awesome icons display fine throughout the website, it’s only my widget bullets that they don’t.

[David]

Do you know which version of FontAwesome you have installed ?

[Pete]

All I did add was this code

add_action( 'wp_enqueue_scripts', 'tu_load_font_awesome' );
/** 
 * Enqueue Font Awesome. 
 */
function tu_load_font_awesome() {
    wp_enqueue_style( 'font-awesome', '//use.fontawesome.com/releases/v5.5.0/css/all.css', array(), '5.5.0' );
}

And all my font awesome 5 icons show up fine everywhere, except the widgets.

[David]

In your CSS try declaring:

font-family: 'Font Awesome\ 5 Free';

And check to make sure the FA Icon unicode is a a FA 5 supported code.

[Pete]

No joy unfortunately

[David]

Is there no possibility to see the Site? Really shooting in the dark 🙂

[Pete]

Site url added

[David]

Thanks. Ok thats a Brand Icon so try this font-family:

font-family: 'Font Awesome\ 5 Brands';

[Pete]

Bingo thanks

[Pete]

Ahhhhhhhhh I found the issue…

Specifying the proper font-weight seems key to have some of the symbols displayed properly

font-weight has to be:

400 for Regular and Brands symbols
900 for Solid symbols
300 for Light symbols

https://stackoverflow.com/questions/47712987/font-awesome-5-on-pseudo-elements

[David]

Awesome – FA 5 introduces a lot of nuances that are right pain lol
Glad you got it working.

[Author]

Posts