Ajouter google matériau icône du design en css pseudo :après le contenu

Je voulais juste faire ajouter un peu de lunettes à la conception de matériel les icônes au contenu d'un lien sur le vol stationnaire:

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

mais il ne fonctionne pas, veuillez voir mon violon.

  • ce n'est pas la façon pseudo-classes. Vous ne pouvez pas ajouter de code html avec css.
InformationsquelleAutor Sebastian S. | 2015-11-10
  1. 31

    Modifier votre CSS pour cela:

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

    De sorte que vous pouvez changer la content: "[whatever icon here]";

    VIOLON

    Également le violon n'a pas charger correctement l'icône de la police afin de la mettre, j'ai placé le lien dans le html.

    • Travaillent bien pour moi sur un paresseux jeudi. Merci Mr Schubert.
    • qu'est -webkit-font-feature-paramètres ? J'ai eu un "Votre recherche - -webkit-font-feature-paramètres - ne correspond à aucun document." dans une recherche google (O. o)
    • font-feature-paramètres de la propriété CSS permet de contrôler l'avancée des fonctions typographiques dans les polices OpenType." developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings
    • Il est très important d'ajouter: font-feature-paramètres: 'liga"; Si vous voulez que votre Matériel Icônes de rendu de Firefox.
    • il ne fonctionne pas dans IE11 malheureusement
    • Vous êtes mon héros!
    • C'est à bord de cas, mais j'ai eu un cas où la police n'était pas s'afficher correctement. L'élément que le pseudo-élément était sur eu un text-transform: uppercase; qui était à l'origine du texte correspondent pas, mais il n'était pas évident en regardant les outils de dev, donc ça a pris une seconde pour réfléchir. Merci pour la réponse quand même!!

    InformationsquelleAutor C.Schubert
  2. 2

    C. Schubert était presque là avec leur répondre, mais si vous aussi vous voulez avoir IE10+ soutien dont vous avez besoin pour ajouter font-feature-settings: 'liga' 1; Donc fini le style ressemble à ceci...

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

    Et comme le C. Schubert dit de changer le content: "[whatever icon here]"; à l'icône désirée.

    InformationsquelleAutor Ed Fryed
  3. 2

    Si vous souhaitez utiliser un Matériau Icône avec deux mots ou plus, alors vous aurez besoin d'utiliser le trait de soulignement séparateur comme ceci:

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