[Resolved] How to change back to top svg arrow style? (“font-weight”)

[Mikko]

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.

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

Thank you so much.

[Elvin]

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.

[Mikko]

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&#8221; xmlns:xlink=”http://www.w3.org/1999/xlink&#8221; 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.

[Elvin]

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.

[Mikko]

Perfect, it works now!

Thank you so much Elvin.

[Elvin]

Perfect, it works now!

Thank you so much Elvin.

Nice one. Glad it works for you. No problem. 😀

[Morgan]

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)

[Leo]

Can you open a new topic for your question?

We can reference back to this one if needed.

Thanks 🙂

[Author]

Posts