如何在mjml中使用font-awesome？

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数字按1递增的简单动作不起作用。我发现获得一个图标的unicode等效项的最好方法是使用<i class="far fa-star"></i>"之类的东西将其呈现在一个普通网页中，然后将该图标复制粘贴到http://unicode.scarfboy.com/中

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

Answer 3

其他的答案对我没有帮助。无论如何，您可以将其作为包含在<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>

您可以使用此查看它的实际效果