Aggiungere google icona del materiale di progettazione in CSS pseudo: dopo il contenuto

Question

Volevo solo fare aggiungere un po 'di design dei materiali googles icons al contenuto di un link al passaggio del mouse:

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

ma non funziona, si prega di vedere il mio fiddle.

Answer 1

Cambia la tua CSS a questo:

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

modo da poter cambiare il content: "[whatever icon here]";

FIDDLE

anche il violino non caricare correttamente il tipo di carattere icona in modo messo ho messo il link in l'html.

Answer 2

C.Schubert era quasi lì con la loro risposta, ma se si desidera anche avere IE10 + supporto è necessario aggiungere font-feature-settings: 'liga' 1; Così lo stile finito sarà simile a questa ...

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

E come C.Schubert detto cambiare il content: "[whatever icon here]"; all'icona desiderata.

Answer 3

Se si desidera utilizzare un icona del materiale con due o più parole, allora avrete bisogno di utilizzare il separatore di sottolineatura come questo:

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