How does one use font-awesome with mjml?

Question

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?

Answer 1

First you need to include the font.

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

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.

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

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

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/