2015-06-17 8 views
5

Ich habe eine HTML-Vorlage für eine Mailchimp-Kampagne erstellt, die font awesome Symbole in der Fußzeile enthält. Wenn ich die HTML-E-Mail mit Mandrill sende, funktioniert es gut. Wenn ich den HTML-Code in eine Mailchimp-Vorlage importiere, erscheinen die Symbole nicht.Verwenden der Schriftart Awesome Symbole in Mailchimp Kampagne

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

Hier sind die Symbole im Einsatz:

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

Antwort

3

Sie müssen Inline-CSS verwenden, wie sie sagt:

Verwenden Inline-CSS Da Browser-basierte E-Mail-Anwendungen, wie Gmail, strip out und <body> Tags standardmäßig verwenden Sie immer Inline-CSS über eingebettete CSS.

Lesen Sie die link

Versuchen Sie Ihr Code-Umwandlungs-here und dann Mail

+0

Es tut uns leid, aber Schriftart Symbole funktionieren nicht auf E-Mail-Clients. Dies wird das Problem nicht beheben. –

0

Wenn Sie fragen, „Wie kann ich eine HTML-Vorlage verwenden, die Schriftart Ehrfürchtig Symbole enthält, in einer MailChimp Kampagne " dann kann ich nicht helfen.

Aber ich kann antworten "Wie kann ich Font Awesome Symbole in einer MailChimp-Kampagne verwenden?"

Die einzige Möglichkeit, die ich gefunden habe funktioniert, ist Ihre MailChimp Kampagne auf ihrer Website zu erstellen, mit ihrer Kampagne Editor/Designer. Im Grunde musste ich das Symbol in ein Bild umwandeln und es in-line anpassen und an meine Bedürfnisse anpassen. Extra manuelle Arbeit, aber das ist was ich brauchte. Hoffe das hilft.

2

Es gibt keine Möglichkeit, dies zu tun. Leider sind E-Mail-Clients viel zu eingeschränkt. Die meisten können nicht mit CSS3 umgehen, noch mit @ font-face (das ist, was font-awesome für die Icons verwendet). Wenn Sie Outlook-Unterstützung möchten - Sie wollen sicherlich - sollten Sie die Symbole auch nicht als Hintergrundbilder verwenden.

Der einzige sichere Weg ist, jedes Symbol in Bilder zu konvertieren. Glücklicherweise kann iconmoon helfen. Wählen Sie die Symbole, die Sie benötigen, wählen Sie als SVG/PNG herunterladen und verwenden Sie die PNG-Dateien.

Eine andere Warnung: Verwenden Sie Tabellen für das Layout, wie Sie 1998 waren, keine Schwimmer oder ausgefallene Sachen wie das.

Verwandte Themen