html - 如何将 font-awesome 与 mjml 一起使用？

Question

我正在尝试实现一个使用带有 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>
...

但是，这不起作用。任何人都可以建议我如何最好地做到这一点？

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