Tesla Pro: Replace icons with text

Tesla Pro:
I would like to replace the icons with text - e.g. “Down” and “Menu” - how do I do it?

Skjermbilde 2023-03-05 kl. 1.45.41 pm 2

I’m pretty sure that Tesla Pro does not allow you to change something like this in it’s settings, but I don’t own it so I can’t check. The scroll down symbol and mobile menu are very standard and visitors are used to seeing them and know what they mean. I’d think about if you really want to make this change.

Changing the scroll down icon would also require changing the circle so the text doesn’t extend past it.

If you really want to do this, it could be done with CSS changes. Since you did not post a link, I could only experiment with the Tesla Pro demo website. If you want custom changes like this, you should really post a link to a test page of your website.

With all that said, here’s CSS to make the changes you outlined:

#scroll_down_button  {
    width: 90px !important;
}
#scroll_down_button i::before {
    Content: "Down" !important;
    width: auto !important;
}
#mobile_navigation_toggle i::before {
    Content: "Menu" !important;
}

3 Likes

Thanks for the reply on a Sunday - this worked as I wanted.
It is my customer who wants this. His target audience is 65+ and I have said that “everyone” understands these symbols, but he insisted on text and not icons. So… well…

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.