Change Scroll Bottom Anchor icon

[colderik]

Hi,

I’m hoping you can help with some global CSS or change in my child theme to change the Scroll Bottom Anchor icon.

Ideally I would like it to be replaced with the “light chevron circle down icon” available when configuring a normal button (l-chevron-circle-down).

The site is here: https://fineartlighting.co.uk

Many thanks.

Derek

[christian]

Hey Derek,

There’s no option for this but here’s the code to override the icon.

.x-scroll-top i:before {
    content: "\f062";
}

You can change f062 in the code. f062 is a Font Awesome icon unicode which you can get from the Font Awesome website. You can browse for icons at https://fontawesome.com/icons. Click on an icon and you’ll see the unicode posted in the icon’s page.

Hope that helps.

[colderik]

Hi Christian,

Thank you very much. Actually it was the scroll button on the bottom of the slider I wanted to adjust, but your reply helped me to work out the solution.

In case others are interested I added this to the Global CSS to change the FontAwesome icon and its weight:

.x-slider-scroll-bottom i:before {
  content: "\f103";
  font-weight: 300;
}

And this to remove the border from the built-in scroll button:

.x-slider-scroll-bottom {
  border: none;
}

Great support as always. Thank you.

Derek

[friech]

We are delighted to assist you with this and thank you for sharing that solution.

Cheers!