css pseudo google malzeme tasarımı simge ekleme: Ben sadece vurgulu bir bağlantı içeriğiyle googles malzeme tasarımı <a href="https://www.google.com/design/icons/" rel="noreferrer">icons</a> bazı eklerim istediği içeriğe

Question

sonra:

a:hover::after { 
    content: "<i class="material-icons">link</i>" 
} 

ama çalışmıyor, lütfen bkz benim fiddle.

Answer 1

Buna CSS değiştirin

:

a:hover::after { 
    font-family: 'Material Icons'; 
    content: "link"; 
    -webkit-font-feature-settings: 'liga'; 
} 

Yani Ayrıca content: "[whatever icon here]";

FIDDLE

değiştirebilir doğru böylece simge yazı tipini yüklemek ı bağlantıyı yer koymadı keman html.

Answer 2

C.Schubert verdikleri yanıta ile neredeyse yoktu ama aynı zamanda sahip olmak istiyorsanız IE10 + ... So bitmiş stil gibi görünecektir font-feature-settings: 'liga' 1; eklemem gerekiyor

a:hover::after { 
    font-family: 'Material Icons'; 
    content: "link"; 
    -webkit-font-feature-settings: 'liga' 1; 
    -moz-font-feature-settings: 'liga' 1; 
    font-feature-settings: 'liga' 1; 
} 

Ve C.Schubert gibi desteklemek Bu, istediğiniz simgeye content: "[whatever icon here]"; değiştirin.

Answer 3

iki veya daha fazla kelime ile bir Malzeme Simge kullanmak istiyorsanız o zaman böyle alt çizgi ayırıcı kullanmanız gerekir:

a:hover::after { 
    font-family: 'Material Icons'; 
    content: "chevron_right"; 
}