如何将 font-awesome 与 mjml 一起使用? [英] How does one use font-awesome with mjml?

问题描述

我正在尝试使用带有 mjml 的字体来实现一个电子邮件模板，我不知道如何去做.我试过使用 cdn 如下:

I am trying to implement an email template that uses font awesome with mjml, I am not sure how to go about this. I have tried using a cdn as follows:

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

但是这不起作用.任何人都可以建议我如何最好地实现这一目标?

However this is not functional. Can anyone advise me how best to accomplish this?

推荐答案

首先你需要包含字体.

<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 编号.如果你拉起星标页面，你可以看到它是f005.

After this you need to find the unicode number for the font you wish you use. If you pull up the star icon page you can see that it is f005.

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

Now you can use the mj-text tag to include the font.

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

This works for solid icons. The difference between icons of class fas and far is that fas has a weight of 900 and far a weight of 400. However, in my testing changing the font-weight didn't yield any different result. I did discover I could get the far version of the star icon by using f006. I checked other icons and the simple act of bumping the unicode number by one did not work. The best way I found to get an icon's unicode equivalent that is not listed on the Font Awesome is to render it in a normal webpage using something like <i class="far fa-star"></i>" and then copy-and-paste the icon into http://unicode.scarfboy.com/

这篇关于如何将 font-awesome 与 mjml 一起使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！