Using Font Awesome icons in Mailchimp campaign

Question

Using Font Awesome icons in Mailchimp campaign

24.8k views Asked by Karl At 24 November 2024 at 15:56

I have created an HTML template for a mailchimp campaign that includes font awesome icons in the footer. If I send the HTML email using Mandrill, its works fine. When I import the HTML into a Mailchimp template, the icons dont appear.

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width" />
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
    <style>
.footer i {
        color: #999;
        margin: 0 2px;
    }

    .footer i:hover {
        color: #333;
    }

    .footer p {
        text-align: center;
        margin-bottom: 15px;
    }

    .footer a i {
        border: none;
        outline: none;
    }
</style>

Here are the icons in use:

<p>
  <a href="http://facebook.com/"><i class="fa fa-facebook-square fa-2x"></i>
  <a href="http://twitter.com/"><i class="fa fa-twitter fa-2x"></i>
  <a href="http://pinterest.com/"><i class="fa fa-pinterest fa-2x"></i>
  <a href="http://instagram.com/"><i class="fa fa-instagram fa-2x"></i>
</p>

Original Q&A

There are 3 answers

**Ajay Narain Mathur** · Answer 1 · 2015-06-17 02:42:32

You need to use inline CSS as it says :

Use inline CSS Because browser-based email applications, such as Gmail, strip out <head> and <body> tags by default, always use inline CSS over embedded CSS.

Read the link

Try converting your code here and then mail it

**Elton Mesquita** · Answer 2 · 2017-02-10 01:30:18

There's no way to do this. Unfortunately e-mail clients are way too limited. Most can't handle any CSS3, nor @font-face (that's what font-awesome uses for the icons). If you want Outlook support - you certainly want - you shouldn't use the icons as background images too.

The only safe way is to convert every icon to images. Fortunately, iconmoon can help. Choose the icons you need, select to download as SVG/PNG and use the PNG files.

Another warning: use tables for layout, like you were in 1998, no floats or fancy stuff like that.

**Jeremy K** · Answer 3 · 2017-02-09 03:53:01

If you are asking: "How can I use a HTML template, which includes Font Awesome icons, in a MailChimp campaign?" then I can't help.

But I can answer "How can I use Font Awesome icons in a MailChimp campaign?"

The only way that I found that works is to build your MailChimp campaign on their website, using their campaign editor/designer. Basically, I had to turn the icon into an image, and in-line and re-size it to fit my needs. Extra manual work, but this is what I needed. Hope this helps.

TechQA.

Using Font Awesome icons in Mailchimp campaign

There are 3 answers

Related Questions in HTML

Related Questions in CSS

Related Questions in FONT-FACE

Related Questions in FONT-AWESOME

Related Questions in MAILCHIMP

Popular Questions

Popular Tags

Trending Questions