How to Change the “Scroll To Top” Icon in Astra?

Want to personalize the look and feel of the Scroll To Top icon in your Astra theme?

The astra_scroll_top_icon filter gives you the power to do just that. By using a simple code snippet, you can easily change the icon’s class name, enabling you to:

• Display different icons from Font Awesome or other icon libraries.
• Apply custom styles to create a unique icon that aligns with your branding.
• Add animations or interactive elements to make the icon more engaging.

How to Change the “Scroll To Top” Icon in Astra?

By using a simple code snippet, you can easily change the “Scroll To Top” Icon in Astra.

Here’s how to add a classic Font Awesome arrow icon:

function astra_scroll_top_icon_callback() {
    $classes = 'fa fa-arrow-up'; // Replace with your desired Font Awesome icon class
    return $classes;
}
add_filter( 'astra_scroll_top_icon', 'astra_scroll_top_icon_callback', 10 );

Note: To use ‘fa fa-angle-double-up’ class you need to enqueue Font Awesome to your theme.

Before you make any customizations, it’s a best practice to create a child theme to avoid affecting your main theme. If you already have a child theme, you can skip this step. Now, follow these steps to change the logo on specific pages:

1. Login to your WordPress website.
2. Navigate to Appearance > Theme Editor.
3. Select the Child theme from the right-top corner dropdown.
4. Open the `functions.php` and Insert the following code snippet at the end of the file.
5. After adding the code, click on the “Update File” button.

Once you update the code, the scroll to top icon in the front end will look like this:

Check out the document that explains how to add custom PHP code using the child theme’s functions.php file. 

We hope this document has been helpful. Please feel free to leave a comment below if you have any queries.