remove envelope icon from email address link

I just answered this here and sorry I didn’t see your post until now (I’ll blame it on the holidays even though I’m not sure whether that’s actually the case or not).

Here’s the fix:

On the Advanced tab of your Theme Options, add this to the Custom CSS area:

a[href^="mailto:"] {
padding-left: 20px;
}

…but I’ll tell you the same thing I told him:

I wouldn’t put a link to my email address publicly on my web page because it’s basically just asking for spambots to crawl it and autosubscribe you to some spam list. Making it a hyperlink (as opposed to un-linked text) is essentially saying that this is a live link to a real email address (as opposed to a text link, but that can still get crawled by bots and added to spam lists). I’d recommend the contact form that is built into Jetpack or Gravity Forms or some other contact form that has some method of spam prevention built in and using that instead of publicly posting your email address.

Hi Chris, thank you for the link to the general thread, sorry I hadn’t seen that one, I came straight to the theme area.

I have added your suggestion to the Custom CSS area on the Advanced tab but it still isn’t working, it is still picking up the CSS in the theme style.css and showing the icon.

I have typed the following into the Custom CSS area and saved:
a[href^=”mailto:”] {
background-image: none;
padding-left: 20px;
}

however, when I go back into the Custom CSS area it has additional \’s added and changed to:

a[href^=\”mailto:\”] {
background-image: none;
padding-left: 20px;
}
I’ve also done it without the background-image:none; too, so just with the padding.

What am I doing wrong? How is it getting those extra \’s and is that why it isn’t working?

It’s probably one of those doh! moments and I’m tired but it’s doing my head in ??

The website is https://swanwickstudio.co.uk/

Thanks, Jules

Hmm…well, I know why it’s adding the \‘s, but there’s nothing you can do about that until there’s an update to the code. The next version of the theme that I’m trying to push out fixes this issue anyway (with the padding) — what you could do in the meantime is just add that to the style.css of the theme from the Editor page. You’ll lose the change when you update, but when you update it will be fixed anyway. Another option is if you have Jetpack installed or if you installed My Custom CSS, you could add it to their CSS editors, but it’s safe enough to do this hack to the theme’s style.css since it will be fixed in the next update.

Thanks Chris for your response, really appreciate it ??