2015-06-17 17 views
5

Altbilgide font harika simgeleri içeren bir mailchimp kampanyası için bir HTML şablonu oluşturdum. HTML e-postasını Mandrill kullanarak gönderirsem, işleri iyi. HTML'yi bir Mailchimp şablonuna aktardığımda, simgeler görünmez. İşte Mailchimp kampanyasında Font Awesome simgelerini kullanma

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

kullanımda simgeleri şunlardır: Bunu söylediği gibi satır içi CSS kullanmak gerekir

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

cevap

3

:

Kullanım inline CSS böyle olarak tarayıcı tabanlı e-posta uygulamaları, Çünkü Gmail, varsayılan olarak <head> ve <body> etiketlerini çıkarır, her zaman gömülü CSS üzerinden satır içi CSS kullanın.

link

posta ardından kodunuzu here dönüştürmeyi deneyin ve Oku

+0

Üzgünüz, ancak yazı tipi simgeleri e-posta istemcilerine çalışmıyor. Bu sorunu çözmeyecek. –

0

Eğer soruyorsan: "Nasıl bir MailChimp kampanyasında, Yazı Müthiş simgeler içeren bir HTML şablonu kullanabilirsiniz ?" o zaman yardım edemem.

Ancak "Bir MailChimp kampanyasında Yazı Tipi Harika simgelerini nasıl kullanabilirim?"

Bu çalışmayı bulmamın tek yolu, MailChimp kampanyanızı kendi web sitesi düzenleyicileri/tasarımcısı kullanarak oluşturmaktır. Temel olarak, simgeyi bir görüntüye dönüştürmek zorunda kaldım ve sıraya sığdı ve ihtiyaçlarıma göre yeniden boyutlandırdım. Ekstra manuel çalışma, ama ihtiyacım olan şey bu. Bu yardımcı olur umarım.

2

Bunu yapmanın bir yolu yok. Ne yazık ki e-posta istemcileri çok sınırlıdır. Çoğu CSS3'ü veya @ font-yüzünü (simgeleri için font-awesome'in kullandığı şey) kaldıramaz. Outlook desteğini istiyorsanız - kesinlikle istiyorsunuz - simgeleri arka plan görüntüleri olarak da kullanmamalısınız.

Tek güvenli yol, her simgeyi görüntülere dönüştürmektir. Neyse ki, iconmoon yardımcı olabilir. İhtiyacınız olan simgeleri seçin, SVG/PNG olarak indirmek için seçin ve PNG dosyalarını kullanın.

Başka bir uyarı,: tabloları, 1998'de olduğu gibi düzende kullanmayın, şamandıralar veya süslü şeyler gibi.

İlgili konular