Skip to content

Instantly share code, notes, and snippets.

@kvann

kvann/social-icons.html

Last active September 14, 2021 17:11
Show Gist options
  • Save kvann/ad056e29d55dbbb79d94ebc7171f2cdd to your computer and use it in GitHub Desktop.
Save kvann/ad056e29d55dbbb79d94ebc7171f2cdd to your computer and use it in GitHub Desktop.
Download ZIP
Social icon custom layout for email template. This layout allows for the social icons to be centered aligned and has fixes set so that alignment are rendering properly in Android and iOS. This layout does not collapse and will overwrite any media query collapsing.
Raw
social-icons.html
<!--
/**
* Adjust the outter container width to match the total of all columns in the table
*/
-->
<div class="outter-container" style="display:flex; width:74px!important; max-width:74px!important;">
<center style="margin:0; outline:none; padding:0; font-size:0px;">
<table cellspacing="0" cellpadding="0" align="center" style="font-size:0; min-width:auto!important; mso-table-lspace:0pt; mso-table-rspace:0pt; margin:auto!important; display:table-cell!important; text-align:center!important;">
<tr>
<td align="center" valign="middle" width="32" style="display:table-cell!important; font-size:0; width:32px!important;">
<a href="https://website.com/" style="margin:0; outline:none; padding:0;">
<img src="/path/to/image/filename.png" border="0" width="32" style="border:none; width:32!important; max-width:32!important;">
</a>
</td>
<td width="10" height="10" style="display:table-cell!important; font-size:0; width:10px!important;">&nbsp;</td>
<td align="center" valign="middle" width="32" style="display:table-cell!important; font-size:0; width:32px!important;">
<a href="https://website.com/" style="margin:0; outline:none; padding:0;">
<img src="/path/to/image/filename.png" border="0" width="32" style="border:none; width:32!important; max-width:32!important;">
</a>
</td>
</tr>
</table>
</center>
</div>
@kvann
Copy link
Author

kvann commented Jul 11, 2016 •
edited
Loading

We're setting the size for each icons to be 34 pixel. If you prefer to change the size of the icons, you must change all instances of the size and width that has 34 set on it.

There is also a 10 pixel wide spacing between the Facebook and Twitter icon.
<td width="10" style="display:inline-block!important;font-size:0;width:10px!important;">&nbsp;</td>

@kvann
Copy link
Author

kvann commented Jul 11, 2018

Simply replicate this block of code for more columns and adjust the width accordingly

<td align="center" valign="middle" width="34" style="display:inline-block!important;font-size:0;width:34px!important;">
	...
</td>
<td width="10" style="display:inline-block!important;font-size:0;width:10px!important;">&nbsp;</td>

@kvann
Copy link
Author

kvann commented Aug 15, 2018

Update 08/15/2018
The current version of this code ensures that each image will scale up to its intended (max) width.

<img src=" ..." style="max-width: 34px !important;">

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment