I have an issue with an email signature I created in HTML with inline styling. When I paste the ready signature into Outlook the signature looks completely wrong (image is bigger than it should be, the icons are missing and more...), whereas when I copy it into Apple's Mail it looks perfectly fine. Could you please help me identify the reason for it?
I tried to adjust the code but it yielded no satisfactory results.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stopka </title>
<link rel="stylesheet" href="styles.css">
<script src="https://kit.fontawesome.com/2c0654d9c2.js" crossorigin="anonymous"></script>
</head>
<body>
<table style="font-family: helvetica; font-size: 9px; width: 400px;">
<tr>
<td rowspan="6" style="width: 150px; height: 150px; padding-right: 10px;"><img style="width: 150px; height: 150px;" src="https://amrs.com.pl/wp-content/uploads/2023/04/logo.jpg"></td>
<td style="color: #081A45; font-size: 18px;">Lorem Ipsum</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td style="padding-top:10px;"><img style="width: 10px; height: 10px;" src="https://amrs.com.pl/wp-content/uploads/2023/04/phone.svg"> <a style="color: black; text-decoration: none;" href="mailto: ">+44 123 123 123</a></td>
</tr>
<tr>
<td><img style="width: 10px; height: 10px;" src="https://amrs.com.pl/wp-content/uploads/2023/04/envelope.svg"> <a style="color: black; text-decoration: none;" href="mailto: ">[email protected]</a></td>
</tr>
<tr>
<td id="contact-end"><img style="width: 10px; height: 10px;" src="https://amrs.com.pl/wp-content/uploads/2023/04/globe.svg"> <a style="color: black; text-decoration: none;" href="">www.google.com</a></td>
</tr>
<tr>
<td style="color:#081A45; font-weight: bold;">Większość moich klientów pochodzi z rekomendacji. Bardzo dziękuję za każde Państwa polecenie.</td>
</tr>
</table>
<hr style="width: 400px; margin-left: 0px; border: 0.5px solid #081A45;">
<table style="font-family: helvetica; font-size: 9px; width: 350px;">
<tr>
<td>Google jest partnerem:</td>
</tr>
<tr>
<td><img style="width: 40px; height: 40px; margin-right: 10px;" src=""> <img style="width: 40px; height: 40px; margin-right: 10px;" src=""> <img style="width: 40px; height: 40px; margin-right: 10px;" src=""> </td>
</tr>
</table>
</body>
</html>
As others have commented, HTML email is not like designing for browsers. Use caniemail to see what is available.
More specifically, you cannot have linked styles. First, inline your styles. You should only need styles in the head for things like media queries.
Scripts and webfonts don't work in (many) email clients. So instead of fontawesome, use a graphic (jpg/png) or a unicode icon.
For image widths in Outlook, use the width and height attributes. I.e.
<img width="15" height="15" style="..." />. You can have different width and height parameters in thestyle="..."part for everything else (e.g. for doing width:100% if you needed to make it responsive). Outlook just looks at the attributes, but the style part will override it, if you need something different for everything else.