Custom Back To Top Icon

Loes Knetsch ©

The default Back Top Top button is so boring. But hey, we can do something about that! You can change the Back to Top button into any icon you want.

You can use any icon for your Back To Top button, I give you a couple you can use right away, but you can also create one yourself if you like. You can find great icons on Icon8.com

How To Create A Back To Top Icon?

Go to Icons8.com and find a great icon
Choose for a size of 96 – 128
Upload the image to Pixlr.com/editor
Resize the image to 100px
Go to edit & free transformation, shift the image if needed
Add text
Save

When the text needs to be added to an angle, then you can create the text on a transparent background, that goes as follow

Create new image on Pixlr.com/editor Size 70px by 50px, choose transparent
Write your text
Save
Open your icon image from your computer
Add the text as a layer
Shift it into position by using free transformation
Save image

You may use these 2

When you have created your smashing Back to the Top icon, you can upload this icon to your website media library and fill in the alt text. If you don’t fill in the alt text, the HTML widget will give an error, that the alt text is missing.

It's not rocket science to get to the top (of your blog) 🙂 Click To Tweet

Time for the Back to Top code

The code is added into a custom HTML widget

Paste below code on a test post
Select the part paste here your image URL
Add media, choose your icon (with alt text)
Copy the code
Paste it into the sidebar or full-width footer widget area
Save
You now have an awesome Go to Top button

Back to Top Code

You had already a Back to Top default button?

So, now there are 2 buttons displayed? Your awesome new icon and the boring Back to Top text button. Here is how you deactivate this boring button on your WordPress dashboard.

You can easily disable your Back to the Top default button in your CCsettings.