I have this page where I’m practicing with HTML emails:
https://actionhamilton.github.io/emails/email1.html
I’m running into an issue with including icons in the footer. Right now, the code for this table looks like this:
<table align="center" class="socialLinks">
<tbody>
<tr>
<td><a href="https://github.com/actionhamilton" target="_blank">
<img class="icon" src="..\images\github-brands.svg" alt="GitHub Icon">
</a></td>
<td><a href="https://www.freecodecamp.org/actionhamilton" target="_blank">
<img class="icon" src="..\images\free-code-camp-brands.svg" alt="freeCodeCamp Icon">
</a></td>
<td><a href="https://www.instagram.com/actionhamilton/" target="_blank">
<img class="icon" src="..\images\instagram-brands.svg" alt="Instagram Icon">
</a></td>
<td><a href="https://www.linkedin.com/in/troy-vassalotti-468053142/" target="_blank">
<img class="icon" src="..\images\linkedin-brands.svg" alt="Linkedin Icon">
</a></td>
</tr>
</tbody>
</table>
However, this doesn’t render on my page. In troubleshooting, I think the issue is with the class=“socialLinks”.
If I remove this class, the icons appear. If I keep the class name the same and comment out the style declarations in the head, they do not appear. However, if I rename the class to remove the word “links” or “link”, the icons appear.
Is there a reason that happens? I have another section with the class “outboundLinks” that works fine. What is it about this specific code that is making the icons table disappear as is?