在Mailchimp活动中使用Font Awesome图标 [英] Using Font Awesome icons in Mailchimp campaign
问题描述
我为一个mailchimp广告系列创建了一个HTML模板，其中包含页脚中的精美图标。如果我使用Mandrill发送HTML邮件，它的工作正常。当我将HTML导入Mailchimp模板时，图标不会出现。
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8/>
< meta name =viewportcontent =width = device-width/>
< link href =http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css =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;
概述：无;
}
< / style>
以下是使用中的图标：
< p为H.
< 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>
没有办法做到这一点。不幸的是，电子邮件客户端太有限了。大多数人不能处理任何CSS3，也不能处理@ font-face（这就是图标所使用的字体）。如果你需要Outlook支持 - 你当然想要 - 你不应该使用图标作为背景图片。
唯一安全的方法是将每个图标转换为图像。幸运的是， iconmoon 可以提供帮助。选择您需要的图标，选择下载为SVG / PNG并使用PNG文件。
另一个警告：使用表格进行布局你是在1998年，没有漂浮或像那样的花哨的东西。
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>
There's no way to do this. Unfortunately e-mail clients are way too limited. Most can't handle any CSS3, nor @font-face (that's what font-awesome uses for the icons). If you want Outlook support - you certainly want - you shouldn't use the icons as background images too.
The only safe way is to convert every icon to images. Fortunately, iconmoon can help. Choose the icons you need, select to download as SVG/PNG and use the PNG files.
Another warning: use tables for layout, like you were in 1998, no floats or fancy stuff like that.
这篇关于在Mailchimp活动中使用Font Awesome图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
