Docs

[davidferp]

Hello there,

For now I am using the code below to customize the top anchor link, but I would like to be able to change the icon in the circle of the scroll anchor too, to another character or custom icon.

.x-scroll-top {
    border: 3px solid rgb(73, 168, 150);
    bottom: 40px;
    color: rgb(73, 168, 150);
    height: 40px;
    line-height: 30px;
    width: 40px;
  	font-size: 25px;
  	opacity: 1 !important;
}

Could you please help me here?

Thanks! 🙂

[Nabeel A]

Hi there,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[Rue Nel]

Hi There,

Thanks for writing in!

To change the icon inside the circle of the scroll anchor, please add the following css code in your child theme’s style.css

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

This code will not work out in the customizer because it will automatically remove slash and backslash for security purposes. You can get the icon’s css rule here: http://fontawesome.bootstrapcheatsheets.com/

Hope this helps.

[davidferp]

Thank you that worked! And even straight from the customizer 😉

[Rahul]

Let us know if we can help you with anything else!

[Author]

Posts