Issue
I'm trying to develop a very simple static webpage for my personal website, but have been stuck on a 
that appears when using mailto and the a href tag (shown to the left of the "@" symbol):
I have opened the webpage on multiple browsers and it shows up on all of them. Does anyone know if it is part of the drop in CSS sheet I am using, and if so how to remove it? Thanks!
Here is the whole HTML code on Pastebin and here is the mailto line:
<a href="mailto:me@example.com" target="_blank" rel="noopener noreferrer"><span class="myicon fa-solid fa-at"></span></a>
Solution
The envelope icon is part of the CSS stylesheet (light.css) that you are using as seen in this screenshot:
The fix is very simple, we can override the style being set like so:
a[href^="mailto:"]::before {
content: '';
}
This will remove the envelope icon from all the links where the href starts with "mailto:"
Alternately, if you want to remove the mail icon from just this link,
You can set a class to the link tag, for e.g.: my-class, like so:
<a href="mailto:me@example.com" class="my-class" ...>...</a>
Then in your style tag need to add another rule like so:
...
.my-class::before {
content: '' !important;
}
Answered By - shadow-lad
