[Support request] How to replace the icon in ‘back to top’ button?

[Shami]

I want to replace the normal icon in the back-to-top button with my own svg icon.

Please provide me the css for this.

Thanks.

[Fernando]

Hi Shami,

Try adding this Snippet:

add_filter( 'generate_svg_icon', function( $output, $icon ) {
    if ( 'arrow-up' === $icon ) {
        $output = '<svg xml:space="preserve" version="1.1" viewBox="0 0 129.921 129.921" height="129.921px" width="129.921px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><g id="Layer_2"></g><g id="Layer_1"><g><path d="M63.775,100.941c-31.357,0-56.867-25.51-56.867-56.867c0-1.642,1.33-2.972,2.973-2.972H117.67 c1.642,0,2.972,1.33,2.972,2.972C120.642,75.431,95.131,100.941,63.775,100.941z M12.938,47.047 c1.544,26.701,23.756,47.949,50.837,47.949c27.08,0,49.293-21.249,50.836-47.949H12.938z"></path></g><g><path d="M63.775,91.582c-26.28,0-47.66-21.38-47.66-47.66c0-1.642,1.331-2.972,2.973-2.972h89.374 c1.643,0,2.973,1.331,2.973,2.972C111.435,70.202,90.055,91.582,63.775,91.582z M22.165,46.895 c1.53,21.619,19.608,38.742,41.61,38.742s40.08-17.123,41.61-38.742H22.165z"></path></g><g><path d="M63.775,62.385c0,0,7.744,10.229,0,10.229S63.775,62.385,63.775,62.385z"></path></g><g><path d="M78.323,56.358c0,0,12.709,1.757,7.233,7.233C80.081,69.067,78.323,56.358,78.323,56.358z"></path></g><g><path d="M49.226,56.358c0,0-1.756,12.709-7.232,7.233C36.519,58.115,49.226,56.358,49.226,56.358z"></path></g></g></svg> ';
	
		$classes = array(
			'gp-icon',
			'icon-' . $icon,
		);
	
		return sprintf(
			'<span class="%1$s">%2$s</span>',
			implode( ' ', $classes ),
			$output
		);
	}

    return $output;
}, 15, 2 );

Replace the SVG with your own.

Adding PHP: https://docs.generatepress.com/article/adding-php/#code-snippets

[Shami]

Thanks. worked like a charm.

I’ve replaced the icon now.

I’d also like to the enter animation changed.

The current animation is “fade in.”

I want it to slide bottom up and fade in like it normally does.

[Shami]

I think I figured it out myself.

[Fernando]

I see. You’re welcome, Shami!

[Author]

Posts