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?

score 4 · Answer 1 · answered Oct 30 '19 at 21:01

4

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/

answered Oct 30 '19 at 21:01

David Baucum

2,162
24
25

This answer was very helpful for me. However, it didn't work for me when placing the unicode in HTML. It only worked when I place the unicode in CSS like so: `some-element::after { content: '\f005'; }` – Yos Mar 18 '20 at 15:29
Update for FA5 - use the following in the head: ` `, and he `mj-text` should use font-family `Font Awesome 5 Brands` or `Font Awesome 5 Free` (for the solid icons). Other font styles are not free. – danbars Aug 14 '20 at 12:28
And the unicode value for each glyph can be found in the glyph's page on fa site. E.g. https://fontawesome.com/icons/calendar?style=solid is `f133` – danbars Aug 14 '20 at 13:19
Does not work in gmail web or gmail android. Displays a square instead of the icon. – Freddy Jun 29 '23 at 11:56

score 1 · Answer 2 · answered Aug 06 '21 at 08:04

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

Does not work in gmail web or gmail android. Icon is not displayed. — Freddy, Jun 29 '23 at 11:54

Yoelkys R. Rodríguez González · Answer 3 · 2022-04-05T15:37:22.240

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

Welcome to SO! Please edit your answer and add a little textual explanation why and how it works and how it differs from the other answers. — ahuemmer, Apr 07 '22 at 12:00

score 0 · Answer 4 · answered Feb 09 '21 at 22:56

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>

How does one use font-awesome with mjml?

4 Answers4

Linked