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>