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

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

Home Forums Support How to replace the icon in ‘back to top’ button?

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

    #2455555
    Fernando
    Customer Support

    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

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

    #2455605
    Shami

    I think I figured it out myself.

    #2458329
    Fernando
    Customer Support

    I see. You’re welcome, Shami!

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