I have created an HTML template for a mailchimp campaign that includes font awesome icons in the footer. If I send the HTML email using Mandrill, its works fine. When I import the HTML into a Mailchimp template, the icons dont appear.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<style>
.footer i {
color: #999;
margin: 0 2px;
}
.footer i:hover {
color: #333;
}
.footer p {
text-align: center;
margin-bottom: 15px;
}
.footer a i {
border: none;
outline: none;
}
</style>
Here are the icons in use:
<p>
<a href="http://facebook.com/"><i class="fa fa-facebook-square fa-2x"></i>
<a href="http://twitter.com/"><i class="fa fa-twitter fa-2x"></i>
<a href="http://pinterest.com/"><i class="fa fa-pinterest fa-2x"></i>
<a href="http://instagram.com/"><i class="fa fa-instagram fa-2x"></i>
</p>
You need to use inline CSS as it says :
Read the link
Try converting your code here and then mail it