How to change back to top svg arrow style? ("font-weight")

Hi,

I want to apply “font-weight” or similar effect to the arrow but I’m struggling because it’s svg?

I’ve tried applying “font-width” and “stroke-width” to different selectors without success.

That's right. font-weight only applies to font characters. SVG is an image format.

Is there a way to make the arrow “fatter”?

You can edit how the back to top button is being rendered by adding your own SVG using this snippet:

add_filter( 'generate_back_to_top_output', 'tu_custom_back_to_top_icon' );
function tu_custom_back_to_top_icon() {
    printf(
		'<a title="%1$s" href="#" class="generate-back-to-top" style="opacity:0;visibility:hidden;" data-scroll-speed="%2$s" data-start-scroll="%3$s">
				<span class="screen-reader-text">%5$s</span>
				%6$s
			</a>',
			esc_attr__( 'Scroll back to top', 'generatepress' ),
			absint( apply_filters( 'generate_back_to_top_scroll_speed', 400 ) ),
			absint( apply_filters( 'generate_back_to_top_start_scroll', 300 ) ),
			esc_attr( apply_filters( 'generate_back_to_top_icon', 'fa-angle-up' ) ),
			esc_html__( 'Scroll back to top', 'generatepress' ),
			generate_get_svg_icon( 'arrow-up' )
	);
}

Replace the generate_get_svg_icon( 'arrow-up' ) with your custom <svg> markup with a thicker arrow.

Hi,

I'm trying to apply the following SVG to snippet you provided.

<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="122.88px" height="80.593px" viewBox="0 0 122.88 80.593" enable-background="new 0 0 122.88 80.593" xml:space="preserve"><g><polygon points="122.88,80.593 122.88,49.772 61.44,0 0,49.772 0,80.593 61.44,30.82 122.88,80.593"/></g></svg>

I tried to work it out myself but I can't get the svg showing.

Thank you extra-much if you can help sort this out.

You can try this instead:

add_filter( 'generate_svg_icon', function( $output, $icon ) {
    if ( 'arrow-up' === $icon ) {
        $svg = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="122.88px" height="80.593px" viewBox="0 0 122.88 80.593" enable-background="new 0 0 122.88 80.593" xml:space="preserve"><g><polygon points="122.88,80.593 122.88,49.772 61.44,0 0,49.772 0,80.593 61.44,30.82 122.88,80.593"/></g></svg>';
        return sprintf(
            '<span class="gp-icon %1$s">
                %2$s
            </span>',
            $icon,
            $svg
        );
    }

    return $output;
}, 15, 2 ); 

This replaces the arrow-up icon used on your site to the SVG you've provided. This should apply to your back to top button.

Perfect, it works now!

Thank you so much Elvin.

Perfect, it works now!

Thank you so much Elvin.

Nice one. Glad it works for you. No problem. :D

Following the above got mine to work too, as I wanted the exact same.
So thanks for that!

Yet, I only needed to do this because my prior filter+css was no longer working, and while I understand we're talking SVG vs FontAwesome here, was just wondering why it seems to have gotten so much more complex to do what took me changing fa-angle-up to fa-caret-up in a filter in previous versions.

The exact same filter code, for SVG, exists in footer.php why do we need to replace it entirely + add a new SVG filter, to make simple SVG changes - doesn't that code exist in footer to be called?
Why not have a setting in customizer, upload SVG would streamline things, or failing that a simple(r) filter as I used previously?

Also, I notice that having "SVG" selected in Customizer means the Filter x 2 w' SVG I just added, as per above, works but setting it to "Font" breaks it.
Can you give some details of the most lightweight method to use considering that I plan to use emojis & icons? (I don't mind using random SVG if there's a performance improvement)

Can you open a new topic for your question?

We can reference back to this one if needed.

Thanks :)