在 Mailchimp 活动中使用 Font Awesome 图标答案

【问题标题】：Using Font Awesome icons in Mailchimp campaign在 Mailchimp 活动中使用 Font Awesome 图标
【发布时间】：2015-09-02 02:04:06
【问题描述】：

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

【问题讨论】：

标签： html css font-face font-awesome mailchimp

【解决方案1】：

你需要使用内联 CSS ：

使用内联 CSS 因为基于浏览器的电子邮件应用程序，例如 Gmail，默认去掉<head>和<body>标签，总是使用内联 CSS 优于嵌入式 CSS。

阅读link

尝试转换您的代码here 然后邮寄

【讨论】：

抱歉，字体图标在电子邮件客户端上不起作用。这不会解决问题。

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

如果您问：“我如何在 MailChimp 活动中使用包含 Font Awesome 图标的 HTML 模板？”那我就帮不上忙了。

但我可以回答“如何在 MailChimp 活动中使用 Font Awesome 图标？”

我发现可行的唯一方法是使用他们的活动编辑器/设计器在他们的网站上构建您的 MailChimp 活动。基本上，我必须将图标转换为图像，然后嵌入并重新调整大小以满足我的需要。额外的手工工作，但这是我需要的。希望这会有所帮助。

【讨论】：