How to add text into Scroll to Top Icon

378 Posts

Web IT Solutions LLP posted this 25 January 2019

Dear Sir,

We like to add text to "Scroll to Top" Icon next to left or right.

<a href="#" class=" bd-backtotop-1 " style="display: none;">
    <span class="bd-icon-67 bd-icon "></span>
</a>


.bd-icon-67:before {
    content: "TOP" url(../../assets/images/3c823f9…_go_to_top.png);
}

We added content: "TOP" along with url image using Additional CSS but still no success.

Sample URL - http://demo.kiddlemontessori.com/

Can you let us know who to make it work ??? Just let us know what we need to add it in CSS so that i can get the desired output. We just need icon with text left or right direction.

Waiting for your valuable reply.

Regards
Suffian Ahmed

Dear Sir, We like to add text to "Scroll to Top" Icon next to left or right. <a href="#" class=" bd-backtotop-1 " style="display: none;"> <span class="bd-icon-67 bd-icon "></span> </a> .bd-icon-67:before { content: "TOP" url(../../assets/images/3c823f9…_go_to_top.png); } We added content: "TOP" along with url image using Additional CSS but still no success. Sample URL - http://demo.kiddlemontessori.com/ Can you let us know who to make it work ??? Just let us know what we need to add it in CSS so that i can get the desired output. We just need icon with text left or right direction. Waiting for your valuable reply. Regards Suffian Ahmed

scroll scroll-to-top back-to-top wishlist scroll-text scroll-top-content back-to-top-text

Vote to pay developers attention to this features or issue.

9 Comments

Order By: Standard | Newest

Support Team posted this 25 January 2019

Hello,

Try this code:

.bd-icon-67:after {
  content:"Scroll to Top"!important;
}

Gina
Themler Support

Hello, Try this code: .bd-icon-67:after { content:"Scroll to Top"!important; } Gina Themler Support

378 Posts

Web IT Solutions LLP posted this 25 January 2019

Yes, its working perfectly... We truly loved your service. Thank You Gina. Appreciated.

Small request, if possible Could you make this provision in Themler tool functionality so that we can add text too please...

Regards
Suffian Ahmed

Yes, its working perfectly... We truly loved your service. Thank You Gina. Appreciated. Small request, if possible Could you make this provision in Themler tool functionality so that we can add text too please... Regards Suffian Ahmed

378 Posts

Web IT Solutions LLP posted this 25 January 2019

And, one more small request...

Can you disable the icon and just keep one text ?

Is that possible, just need to keep text with some background color and padding with out icons or image.

Regards
Suffian Ahmed

And, one more small request... Can you disable the icon and just keep one text ? Is that possible, just need to keep text with some background color and padding with out icons or image. Regards Suffian Ahmed

Is Solution

Support Team posted this 25 January 2019

If you change the code a bit like this:

.bd-icon-67::before {
  content:"Scroll to Top"!important;
}

the text will replace the icon inside the button itself, try it out.

Gina

If you change the code a bit like this: .bd-icon-67::before { content:"Scroll to Top"!important; } the text will replace the icon inside the button itself, try it out. Gina

378 Posts

Web IT Solutions LLP posted this 25 January 2019

Hi Gina, Perferct solution. Thank you so much :-)

Regards
Suffian Ahmed

Hi Gina, Perferct solution. Thank you so much :-) Regards Suffian Ahmed

378 Posts

Web IT Solutions LLP posted this 25 January 2019

If you change the code a bit like this:
.bd-icon-67::before {
  content:"Scroll to Top"!important;
}
the text will replace the icon inside the button itself, try it out.

Gina

Sorry to say this is not working.. i am not sure why.

I tried adding this before code but the entire icon and text is vanished. Why ? Any help please.

> If you change the code a bit like this: > > .bd-icon-67::before { > content:"Scroll to Top"!important; > } > > the text will replace the icon inside the button itself, try it out. > > Gina Sorry to say this is not working.. i am not sure why. I tried adding this before code but the entire icon and text is vanished. Why ? Any help please.

Support Team posted this 25 January 2019

Right now your icon is using an image and the code forces it to display no font. Could you please try selecting a font icon for this button in Themler with no image uploaded to it:

Then the code above should work.

Gina
Themler Support

Right now your icon is using an image and the code forces it to display no font. Could you please try selecting a font icon for this button in Themler with no image uploaded to it: !btticon.png! Then the code above should work. Gina Themler Support

btticon.png

378 Posts

Web IT Solutions LLP posted this 25 January 2019

Wow, you are too good Gina. Really working as you said... Wondering how this i missed. You are Really Good.

Query - Small request, if possible Could you make this provision in Themler tool functionality so that we can add text too please...

Thank You

Regards
Suffian Ahmed

Wow, you are too good Gina. Really working as you said... Wondering how this i missed. You are Really Good. Query - Small request, if possible Could you make this provision in Themler tool functionality so that we can add text too please... Thank You Regards Suffian Ahmed

Last edited 25 January 2019 by Web IT Solutions LLP

Ashampoo-Snap-2019.01.25-18h37m25s-001-.png

Support Team posted this 25 January 2019

Thank you.
I have added it to the wishlist of future possible implementations.

Gina
Themler Support

Thank you. I have added it to the wishlist of future possible implementations. Gina Themler Support

You must log in or register to leave comments