No results found. Try again with different words?

Search must be at least 3 characters.

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.
How to Change the “Scroll To Top” Icon in Astra?

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

How to Change the "Scroll To Top" Icon in Astra?

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.

Was this article helpful?
Did not find a solution? We are here to help you succeed.

Related Docs

Astra is Free. Now & Forever.

We believe creating beautiful websites should not be expensive. That's why Astra is free for everyone. Get started for free and extend with affordable packages.

REWIND

YEAR IN REVIEW

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Download Free Astra Theme - Modal Popup Form
Scroll to Top
Now choose your preferred
page builder addon
Choose your preferred page builder addon

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Download Free Astra Theme - Modal Popup Form