Die Verwendung von Symbolschriften zum Generieren von Symbolen hat im Vergleich zu bildbasierten Symbolen die folgenden Vorteile:
1. Freie Änderungsgröße
2. Die Farbe frei modifizieren
3.. Schatteneffekt hinzufügen
4.IE6 kann es auch unterstützen
5. Andere Eigenschaften von Bildsymbolen wie Transparenz und Rotation usw. unterstützen.
6. Sie können Attribute wie Texthub und Hintergrundclip hinzufügen: Text, solange der Browser ihn unterstützt.
Wie benutze ich es?Textänderung:
<h3><span aria-hidden = true data-icon = ⇝> </span>
Statistiken
</h3>
[data-icon]: vor {
Schriftfamilie: Ikonen; / * BYO -Symbol Schriftart, intelligent zugeordnet */
Inhalt: Attr (Data-Icon);
Sprechen: Keine; /* Nicht zu vertrauen, aber hey. */
}
Individuelle Ikone:
<a href =# class = icon-Alone>Erstellen Sie Ihre eigene Symbolschrift - Icomoon<span aria-hidden = true data-icon = ▨> </span>
<span class = screen-reader-text> rss </span>
</a>
/ * Gleiche CSS wie oben, plus */
.icon-Alone {
Anzeige: Inline-Block; / * Chrome 19 war seltsam mit Klickbarkeit ohne diese */
}
.Screen-reader-text { / * wiederverwendbar, Toolbox-Art von Klasse * /
Position: absolut;
Oben: -9999px;
links: -9999px;
}
Wenn Sie ein eigenes Ikonfont erstellen müssen, wird empfohlen, Iconmoon zu verwenden. Mit der Verwendung können Sie die benötigte Symbolschrift generieren, indem Sie SVG oder Schriftarten hochladen. Dieser Artikel ist die Online -Demonstration mit Iconmoon, um zu generieren.
Schritt 1: Wählen Sie aus, was sie bereitstellen, oder laden Sie Ihre eigenen hoch Schritt 2:Bitte besuchen Sie die Online -Demonstration, um die Ergebnisse anzuzeigen. Ich hoffe, Sie mögen die Symbolschrift. Wenn Sie der Meinung sind, dass das Symbol nicht glatt genug ist, können Sie CUFON für die Verarbeitung in Betracht ziehen, damit das generierte Symbol schöner ist.
Quelle: http://www.gbin1.com/technology/css/20120827-icon-font-usage/