Geek Answers Handbook

Using Awesome Font Icons in a Mailchimp Campaign

I created an HTML template for the mailchimp campaign, which includes fonts, awesome icons in the footer. If I send an HTML email using Mandrill, its work is great. When I import HTML into the Mailchimp template, the icons do not 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 ai { border: none; outline: none; } </style>

Here are the icons used:

 <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>
+5
source share
3 answers

You need to use inline CSS as it says:

Use inline CSS. Because browser-based email applications such as Gmail, separate the default <head> and <body> tags, always use inline CSS on top of inline CSS.

Read the link

Try converting your code here and then mail it

+3
source

There is no way to do this. Unfortunately, email clients are too limited. Most of them cannot handle CSS3, not @ font-face (which uses font for icons). If you need Outlook support - you certainly want to - you shouldn't use icons as background images, either.

The only safe way is to convert each icon into images. Fortunately, iconmoon can help. Select the icons you need, choose to download as SVG / PNG, and use PNG files.

One more warning : use tables for the layout, for example, you were in 1998, without floats or fancy things.

+3
source

If you ask: "How can I use an HTML template that includes awesome font icons in a MailChimp campaign?" then I can’t help.

But I can answer, "How can I use awesome font icons in a MailChimp campaign?"

The only way I found work was to create your MailChimp campaign on my website using the campaign editor / designer. Basically, I had to turn the icon into an image, as well as a line, and change it to suit my needs. Extra manual work, but this is what I need. Hope this helps.

0
source

More articles:


All Articles