Add Social Media Icons to Email Signature

Want to know how to add social media icons to your email signature, but not sure how? The video will take you through options for creating your signature with HTML and in Google Docs. 

Not sure where to get the individual images for the social media icons? Download some for free!

Submit your email in the form provided and I will send you a free Canva template of a variety of social media icons you can customize and export for your signature.

Use The Sample Code For Your Email Signature

Here is a look at the code shown in the video above. You can highlight the code below and copy and paste it into whatever HTML editing program that you want to use. My go-to editor is Sublime, but Codepen is a great option to see how things look as you edit the HTML.

<table border="0" cellpadding="0">
    <tr>
        <td>
            <img src="https://yourdomain.com/logoexample.jpg" width="100" style="margin-bottom:5px;" />
        </td>
    </tr>
    <tr>
        <td style="line-height:1.5em;">
            <span style="font-size:14px; color:#333333; font-family:Arial, sans-serif; font-weight:bold;">MICHELLE SCHNEIDER,</span>
            <span style="font-size:14px; color:#333333; font-family:Arial, sans-serif; text-transform:uppercase;"> Awesome Human</span><br>
            <span style="font-size:14px; color:#f4397c; font-family:Arial, sans-serif; font-weight:bold;">O </span>
            <span style="font-size:14px; color:#333333; font-family:Arial, sans-serif;">555 111 1111 |</span>
            <span style="font-size:14px; color:#f4397c; font-family:Arial, sans-serif; font-weight:bold;">C </span>
            <span style="font-size:14px; color:#333333; font-family:Arial, sans-serif;">555 222 2222</span><br>
            <span style="font-size:14px; color:#333333; font-family:Arial, sans-serif; font-weight:bold; text-transform:uppercase;">1111 Nowhere Avenue | Wonder City, KS 12345</span><br>
            <a href="https://yourdomain.com/" style="font-size:14px; color:#f4397c; font-family:Arial, sans-serif; font-weight:bold;">MichelleTheCreator.com</a>
        </td>
    </tr>
    <tr>
        <td style="padding-top:10px;">
            <a href="https://facebook.com/"><img src="https://yourdomain.com/facebook_black.png" width="25" style="padding-right:5px;" /></a>
            <a href="https://facebook.com/"><img src="https://yourdomain.com/instagram_black.png" width="25" style="padding-right:5px;" /></a>
            <a href="https://instagram.com/"><img src="https://yourdomain.com/twitter_black.png" width="25" style="padding-right:5px;" /></a>
            <a href="https://linkedin.com/"><img src="https://yourdomain.com/linkedin_black.png" width="25" style="padding-right:5px;" /></a>
        </td>
        </tr>
</table>

How it will look:

MICHELLE SCHNEIDER, Awesome Human
O 555 111 1111 | C 555 222 2222
1111 Nowhere Avenue | Wonder City, KS 12345
MichelleTheCreator.com

Resources

Here are links to the programs and sites I mentioned in the video.

Canva: https://canva.com/
Sublime Text: https://www.sublimetext.com/
CodePen: https://codepen.io/
CodeKit: https://codekitapp.com/