How does one use font-awesome with mjml?

user_7458586 0
Viewed 2833

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 templates email html
4 Answers

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/

user_3174450

The other answers weren't helpful to me. anyway, instead of including Font Awesome as a font, you can just include it as CSS in <mj-style> and use <i> tag instead of <mj-text> like that

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

You can see it in action with this DEMO

user_118779870

I need simple line icons in mjml - this answer to the above question was very helpful to me. I might as well share the details for Simple Line Icons.

Include the font in the 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>

Then use the mj-text tag referencing the font:

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

Or, if I have to use some raw HTML:

<mj-raw>
  <div style="font-family:simple-line-icons">&#xe05c;</div>
</mj-raw>
user_48527370 
<mj-head>
    <mj-font name="FontAwesome" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
</mj-head>

<mj-social mode="horizontal" padding="40px 0">
    <mj-social-element name="facebook" padding="0 0px 0" background-color="transparent" icon-size="0px" color="#D72B30" font-size="24px" font-family="FontAwesome" href="#">&#xf09a;</mj-social-element>
    <mj-social-element name="twitter" padding="0 20px 0" background-color="transparent" icon-size="0px" color="#D72B30" font-size="24px" font-family="FontAwesome" href="#">&#xf099;</mj-social-element>
    <mj-social-element name="instagram" padding="0 20px 0" background-color="transparent" icon-size="0px" color="#D72B30" font-size="24px" font-family="FontAwesome" href="#">&#xf16d;</mj-social-element>
</mj-social>
user_39688690
Related