Question

我为mailchimp广告系列创建了一个HTML模板，其中包含页脚中的字体真棒图标。如果我使用Mandrill发送HTML电子邮件，它的工作正常。当我将HTML导入Mailchimp模板时，图标不会出现。

<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>

以下是正在使用的图标：

<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>

Answer 1

您需要使用内联CSS，因为它说：

使用内联CSS因为基于浏览器的电子邮件应用程序，例如 Gmail，默认情况下删除<head>和<body>标记，始终使用嵌入式CSS的内联CSS。

阅读link

尝试转换代码here，然后将其邮寄

Answer 2

没有办法做到这一点。不幸的是，电子邮件客户端太有限了。大多数人无法处理任何CSS3，也无法处理@ font-face（这就是font-awesome用于图标的方式）。如果您需要Outlook支持 - 您当然想要 - 您也不应该将这些图标用作背景图像。

唯一安全的方法是将每个图标转换为图像。幸运的是，iconmoon可以提供帮助。选择您需要的图标，选择下载为SVG / PNG并使用PNG文件。

另一个警告：使用表格进行布局，就像你在1998年一样，没有花车或花哨的东西。

Answer 3

如果您要问：＆＃34;如何在MailChimp广告系列中使用包含Font Awesome图标的HTML模板？＆＃34;那我无能为力。

但我可以回答＆＃34;我如何在MailChimp广告系列中使用Font Awesome图标？＆＃34;

我发现有效的唯一方法是使用其广告系列编辑/设计师在其网站上制作您的MailChimp广告系列。基本上，我必须将图标转换为图像，并在线并重新调整大小以满足我的需求。额外的手工工作，但这是我需要的。希望这会有所帮助。

在Mailchimp广告系列中使用Font Awesome图标

3 个答案: