[Resolved] Cannot change To Top Icon, with either CSS or Function

[Morgan]

I’ve tried both
.generate-back-to-top:before { content:"f0d8"; font-family: FontAwesome; !important }
and

add_filter( 'generate_back_to_top_icon','generate_back_to_top_icon' );
function generate_back_to_top_icon()
{
    return '';
}

And neither change the back to top icon.

I also have a snippet with latest FontAwesome (works), disabling made no difference:

add_action( 'wp_enqueue_scripts', 'tu_load_font_awesome' );
function tu_load_font_awesome() {
    wp_enqueue_style( 'font-awesome', '//use.fontawesome.com/releases/v5.10.0/css/all.css', array(), '5.10.0' );
}

[David]

Hi there,

you’re using GP SVG Icon option which means neither the CSS or filter function applies. You can either switch to font icons or you will have to change the entire icon using this filter:

https://docs.generatepress.com/article/generate_back_to_top_output/

[Morgan]

I turned off Customizer/General/Icon type to Font, and using
.generate-back-to-top:before { content:"f0d8"; font-family: FontAwesome !important }
now shows the text “f0d8” where the button should be.
https://fontawesome.com/icons/caret-up?style=solid

[David]

Unicodes are expressed with \ before the icon code e.g \f098
You also need to ensure the correct font family is selected.
This guide covers these things:

https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements

[Morgan]

That did it!

FYI I’d copy and pasted yr code from: https://generatepress.com/forums/topic/back-to-top-customization/ , might want to update it for others dropping by.

Thanks 🙂

[David]

Yeah that was before FA 5 really took hold and they introduced separate font families. Always fun dealing with 3rd party updates lol.

Glad to be of help.

[Author]

Posts