Lists with a custom list item image in HTML emails

If you want to customize the list in your HTML email and include an icon next to each list item, you should be careful to make it the same across all email clients.

Below, you can view an example HTML code optimized for HTML emails:

Here’s the HTML code with inline CSS:

<ul style="color:#6D6D6D; font-size:16px; font-family:Helvetica, Verdana, Arial, sans-serif; padding:0px; margin:0px; list-style-type:none;">
<li style="text-align:left; font-size:16px; line-height: 20px; padding:0px 0px 10px 0px;"><img src="http://media.sendloop.com/images/mailing/003.png" border="0" style="float:left; margin-right:10px;"> List item #1</li>
<li style="text-align:left; font-size:16px; line-height: 20px; padding:0px 0px 10px 0px;"><img src="http://media.sendloop.com/images/mailing/003.png" border="0" style="float:left; margin-right:10px;"> List item #2</li>
<li style="text-align:left; font-size:16px; line-height: 20px; padding:0px 0px 10px 0px;"><img src="http://media.sendloop.com/images/mailing/003.png" border="0" style="float:left; margin-right:10px;"> List item #3</li>
<li style="text-align:left; font-size:16px; line-height: 20px; padding:0px 0px 10px 0px;"><img src="http://media.sendloop.com/images/mailing/003.png" border="0" style="float:left; margin-right:10px;"> List item #4</li>
<li style="text-align:left; font-size:16px; line-height: 20px; padding:0px 0px 10px 0px;"><img src="http://media.sendloop.com/images/mailing/003.png" border="0" style="float:left; margin-right:10px;"> List item #5</li>
</ul>

 

Did you enjoy this article? Did it make you laugh or spark an idea? If so please like share, comment and recommend to your friends:

Join 36,000 happy Sendloop customers

Signup for free and try today

Share
Tweet
Share