Hinzufügen von google material design icon in css pseudo :nach Inhalt

Ich wollte nur hinzufügen, einige von googles material design Symbole auf den Inhalt ein link auf hover:

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

aber es funktioniert nicht, bitte Lesen Sie meine fiddle.

  • das ist nicht wie die pseudo-Klassen arbeiten. Sie können nicht hinzufügen von html mit css.
InformationsquelleAutor Sebastian S. | 2015-11-10
  1. 31

    Ändern Sie Ihre CSS diese:

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

    So können Sie die content: "[whatever icon here]";

    FIDDLE

    Auch die Geige nicht richtig laden der icon-font, also legte ich legte den link in der html.

    • Funktionierte gut für mich auf einen entspannten Donnerstag. Vielen Dank, Herr Schubert.
    • was ist -webkit-font-feature-settings ? Ich habe eine "Ihre Suche-webkit-font-feature-settings" - nicht match irgendwelche Dokumente." in einer google-Suche (O. o)
    • font-feature-settings-CSS-Eigenschaft gibt Ihnen die Kontrolle über eine erweiterte typografische Funktionen mit OpenType Schriften." developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings
    • Es ist sehr wichtig, um hinzufügen: font-feature-settings: 'liga'; Wenn Sie wollen, dass Ihr Material Symbole für die Darstellung im Firefox.
    • es funktioniert nicht bei IE11 leider
    • Du bist mein held!
    • Es ist edge-Fall, aber ich hatte einen Fall, wo die schriftart nicht korrekt angezeigt werden. Das element, dass die pseudo-element wurde auf hatte einen text-transform: uppercase; verursacht wurde der text nicht übereinstimmen, aber es war offensichtlich nicht auf der Suche bei dev-tools, so dass es dauerte eine Sekunde, um es herauszufinden. Danke für die Antwort aber!

    InformationsquelleAutor C.Schubert
  2. 3

    C. Schubert war es fast mit Ihrer Antwort, aber wenn du möchtest auch IE10+ Unterstützung, die Sie brauchen, um hinzuzufügen font-feature-settings: 'liga' 1; So das fertige styling wird so Aussehen...

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

    Und wie C. Schubert sagte, ändern Sie die content: "[whatever icon here]"; zu Ihrem gewünschten Symbol.

    InformationsquelleAutor Ed Fryed
  3. 2

    Wenn Sie möchten, verwenden Sie ein Material-Symbol mit zwei oder mehr Wörtern dann müssen Sie verwenden den Unterstrich Trennzeichen wie diese:

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