2015-06-17 11 views
5

Ho creato un modello HTML per una campagna mailchimp che include le icone di caratteri fantastici nel piè di pagina. Se invio l'email HTML usando Mandrill, funziona correttamente. Quando importare l'HTML in un modello Mailchimp, le icone non appaiono.Utilizzo di icone Font impressionante nella campagna Mailchimp

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

Qui ci sono le icone in uso:

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

risposta

3

È necessario utilizzare CSS in linea, come si dice:

Usa CSS in linea Poiché le applicazioni e-mail basate su browser, come ad esempio Gmail, elimina i tag <head> e <body> per impostazione predefinita, utilizza sempre lo stile di codice inline CSS incorporato.

Leggi il link

Prova a convertire il codice here e poi spedirlo

+0

Siamo spiacenti, ma le icone dei caratteri non funzioneranno sui client di posta elettronica. Questo non risolverà il problema. –

0

Se ti stai chiedendo: "Come posso utilizzare un modello HTML, che include caratteri icone impressionanti, in una campagna MailChimp ?" quindi non posso aiutare.

Ma posso rispondere "Come posso utilizzare le icone di Font Awesome in una campagna MailChimp?"

L'unico modo in cui ho trovato che funziona è quello di costruire la tua campagna MailChimp sul loro sito web, utilizzando il loro editor/designer della campagna. Fondamentalmente, ho dovuto trasformare l'icona in un'immagine e in-line e ridimensionarla in base alle mie esigenze. Lavoro manuale extra, ma questo è quello di cui avevo bisogno. Spero che questo ti aiuti.

2

Non c'è modo di farlo. Purtroppo i client di posta elettronica sono troppo limitati. La maggior parte non può gestire alcun CSS3, né @ font-face (è quello che usa font-awesome per le icone). Se si desidera il supporto di Outlook, sicuramente lo si desidera, non utilizzare le icone come immagini di sfondo.

L'unico modo sicuro è convertire tutte le icone in immagini. Fortunatamente, iconmoon può essere d'aiuto. Scegli le icone che ti servono, seleziona per scaricare come SVG/PNG e usa i file PNG.

Un altro avviso: usa le tabelle per il layout, come nel 1998, niente float o cose di questo tipo.

Problemi correlati