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

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

Home Forums Support How to change back to top svg arrow style? (“font-weight”)

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1580912
    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.

    #1580927
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1582263
    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.

    #1582281
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1582316
    Mikko

    Perfect, it works now!

    Thank you so much Elvin.

    #1582318
    Elvin
    Staff
    Customer Support

    Perfect, it works now!

    Thank you so much Elvin.

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

    A wise man once said:
    "Have you cleared your cache?"

    #1718962
    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)

    #1719561
    Leo
    Staff
    Customer Support

    Can you open a new topic for your question?

    We can reference back to this one if needed.

    Thanks 🙂

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.