Usar ícones impressionantes do tipo de letra na campanha Mailchimp

Question

Usar ícones impressionantes do tipo de letra na campanha Mailchimp

eu criei um modelo HTML para uma campanha mailchimp que inclui ícones font awesome no rodapé. Se eu enviar o e-mail HTML usando Mandrill, o seu funciona bem. Quando eu importar o HTML para um modelo Mailchimp, os ícones não aparecem.

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

Aqui estão os ícones em 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>

5

html css font-face font-awesome mailchimp

Author: Karl, 2015-06-17

Source

3 answers

score 3 · Answer 1

Tem de usar a linha CSS como diz:

Usar o CSS incorporado porque as aplicações de E-mail baseadas no navegador, tais como Marcas Gmail, strip out <head> e <body> por omissão, usar sempre CSS incorporado sobre CSS incorporado.

Leia a ligação

Tente converter o seu código aqui e depois envie-o por e-mail

score 3 · Answer 2

Não há maneira de fazer isto. Infelizmente, os clientes de E-mail são muito limitados. A maioria não consegue lidar com nenhum CSS3, nem @font-face (é isso que o font-awesome usa para os ícones). Se você quer Suporte do Outlook - você certamente quer-você não deve usar os ícones como imagens de fundo também.

A única forma segura é converter cada ícone para imagens. Felizmente, iconmoon pode ajudar. Escolha os ícones de que necessita, seleccione para transferir como SVG/PNG e use os ficheiros PNG.

Outro atenção : use tabelas para o layout, como você estava em 1998, sem carros alegóricos ou coisas assim.

score 0 · Answer 3

Se está a perguntar: "Como posso usar um modelo HTML, que inclui ícones fantásticos do tipo de letra, numa campanha do MailChimp?"então não posso ajudar.

Mas eu posso responder " Como posso usar ícones Font Awesome em uma campanha MailChimp?"

A única maneira de eu descobrir que funciona é construir a sua campanha MailChimp no site deles, usando o editor/designer da campanha. Basicamente, eu tinha que transformar o ícone em uma imagem, e em linha e re-dimensioná-lo para atender às minhas necessidades. Trabalho manual Extra, mas isto é ... o que eu precisava. Espero que isto ajude.