如何在 mjml 中使用 font-awesome？答案

【问题标题】：How does one use font-awesome with mjml?如何在 mjml 中使用 font-awesome？
【发布时间】：2019-10-07 10:39:40
【问题描述】：

我正在尝试实现一个使用 mjml 字体的电子邮件模板，我不知道该怎么做。我尝试使用如下 CDN：

  <mj-head>
    <mj-title>Thank you!</mj-title>
    <mj-style>
      <mj-include path="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>

    </mj-style>
    <mj-attributes>
      ...
    </mj-attributes>
  </mj-head>

...
  <mj-text align="center">
        <h3>              
                 Share <i class="fab fa-facebook-f"></i> 
        </h3>
  </mj-text>
...

但是这不起作用。谁能告诉我如何最好地做到这一点？

【问题讨论】：

标签： html email templates mjml

【解决方案1】：

首先你需要包含字体。

<mjml>
  <mj-head>
    <mj-font name="FontAwesome" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
  </mj-head>
</mjml>

在此之后，您需要找到您希望使用的字体的 unicode 编号。如果你拉起star icon page，你可以看到它是f005。

现在您可以使用mj-text 标签来包含字体。

<mj-text font-family="FontAwesome">&#xf005;</mj-text>

这适用于实体图标。 fas 和 far 类的图标之间的区别在于 fas 的权重为 900，far 的权重为 400。但是，在我的测试中，更改 font-weight 并没有产生任何不同的结果。我确实发现我可以使用 f006 获得 far 版本的星形图标。我检查了其他图标，但将 unicode 数字加一的简单行为不起作用。我发现获得 Font Awesome 中未列出的图标的 unicode 等效项的最佳方法是使用 <i class="far fa-star"></i>" 之类的东西在普通网页中呈现它，然后将图标复制并粘贴到 http://unicode.scarfboy.com/

【讨论】：

这个答案对我很有帮助。但是，将 unicode 放在 HTML 中时，它对我不起作用。只有当我像这样将 unicode 放在 CSS 中时它才有效：some-element::after { content: '\f005'; }
FA5 更新 - 在头部使用以下内容：<mj-head> <mj-font name="Font Awesome 5 Brands" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/brands.min.css" /> <mj-font name="Font Awesome 5 Free" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/solid.min.css" /> </mj-head>，而他的 mj-text 应该使用 font-family Font Awesome 5 Brands 或 Font Awesome 5 Free（用于实心图标）。其他字体样式不免费。
每个字形的 unicode 值可以在 fa 网站上的字形页面中找到。例如。 fontawesome.com/icons/calendar?style=solid 是 f133

【解决方案2】：

我需要 mjml 中的简单线条图标 - this answer to the above question 对我很有帮助。我不妨分享Simple Line Icons的详细信息。

将字体包含在mj-head:

<mjml>
  <mj-head>
    <mj-font name="simple-line-icons" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.5.5/css/simple-line-icons.min.css" />
  </mj-head>
</mjml>

然后使用mj-text标签引用字体：

<mj-text font-family="simple-line-icons">&#xe05c;</mj-text>

或者，如果我必须使用一些原始 HTML：

<mj-raw>
  <div style="font-family:simple-line-icons">&#xe05c;</div>
</mj-raw>

【讨论】：

【解决方案3】：

其他答案对我没有帮助。无论如何，而不是将 Font Awesome 作为字体，您可以将其作为 CSS 包含在 <mj-style> 中并使用 <i> 标签而不是 <mj-text> 那样

<mjml>
    <mj-head>
        <mj-style>
            @import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css";
        </mj-style>
    </mj-head>
    <mj-body>
        <mj-section>
            <mj-column>
                <mj-text>
                    follow the link
                    <i class="fas fa-external-link-alt"></i>                    
                </mj-text>
            </mj-column>
        </mj-section>
    </mj-body>
</mjml>

您可以通过此 DEMO

看到它的实际效果

【讨论】：