Ich zeige Ihnen, wie Sie Schriftsymbole in CSS verwenden

Zunächst einmal: Was ist ein Schriftsymbol? Oberflächlich betrachtet ist es ein Symbol, aber tatsächlich ist es Text. Wir können Schriftsymbole genauso festlegen wie Text. Im Allgemeinen gibt es zwei Möglichkeiten, Schriftsymbole festzulegen. Eine besteht darin, CSS-Dateien einzuführen und dann spezielle Klassen festzulegen; die andere besteht darin, sie über den Inhalt im Pseudoelement festzulegen. Schauen wir uns gemeinsam an, wie man es einstellt!

1: Importieren Sie die CSS-Datei und legen Sie eine spezielle Klasse für die Verwendung des Schriftsymbols fest

Ich habe die offizielle Iconfont-Website verwendet, um Experimente durchzuführen. Zuerst habe ich auf Baidu nach Iconfont gesucht, die offizielle Website aufgerufen und mich angemeldet. Nach der Anmeldung habe ich ein neues Projekt erstellt und zuerst mein Projekt geöffnet:

Klicken Sie auf das Symbol „Neues Projekt“:

Geben Sie dann einen Projektnamen ein und klicken Sie auf Neu:

Anschließend können Sie im Suchfeld oben nach dem gewünschten Symbol suchen. Geben Sie beispielsweise „Tmall“ ein, klicken Sie auf „Enter“, bewegen Sie die Maus über das gewünschte Symbol und klicken Sie auf das Einkaufswagensymbol, um es dem Inventar hinzuzufügen:

Öffnen Sie dann das Einkaufswagensymbol in der oberen rechten Ecke, klicken Sie auf Zum Projekt hinzufügen, wählen Sie Ihren Projektnamen aus und klicken Sie auf OK. Mein Projektname ist „HelloWorld“:

Danach gelangen Sie zu meinem Projekt. Das ist das Projekt, in dem Sie das Symbol oben hinzugefügt haben. Wenn Sie es lokal verwenden möchten, klicken Sie auf „Lokal herunterladen“:

Nach dem Download entpacken Sie es und kopieren alle Dateien im innersten Teil der entpackten Datei (Dateien mit der Endung css, eot, woff usw.) in einen Ordner unter meinem Projekt. Der Ordner kann beliebig benannt werden:

Fügen Sie dann die Datei iconfont.css in die HTML-Datei ein:

Die verwendete Methode besteht darin, zuerst Iconfont zur Klasse des Elements hinzuzufügen, in dem ich das Symbol platzieren möchte, und dann den Namen des Symbols hinzuzufügen. Der Name lautet wie folgt:

Wenn Sie diesen Namen verwenden möchten, verschieben Sie ihn einfach auf das Symbol und klicken Sie im Popup-Fenster auf „Code kopieren“:

Dann kannst du es direkt verwenden:

Unter ihnen ist Iconfont erforderlich. Das Folgende ist der Name, nachdem wir den obigen Code kopiert haben

Wenn Sie es nicht lokal herunterladen möchten, können Sie auch die Online-CSS-Datei verwenden. Zuerst finden wir die Schnittstelle des obigen Projekts auf der offiziellen Iconfont-Website. Klicken Sie zuerst auf "Schriftklasse", dann auf "Kein Code, klicken Sie hier, um zu generieren", dann sehen wir einen Link:

Dann müssen wir die Datei nicht herunterladen und auch keine zugehörigen Dateien importieren. Wir müssen nur die CSS-Datei in den HTML-Code einfügen, der das Symbol verwendet:

Danach können Sie es direkt verwenden. Die Klasse muss noch Iconfont enthalten, und dann müssen Sie den Namen des Symbols als Klasse einschließen. Der Symbolname wird immer noch durch „Kopieren des Codes“ erhalten:

Dann kannst du einfach schreiben:

2. Setzen Sie es durch den Inhalt im Pseudoelement

Mit den obigen Schritten können Sie dem Projekt Symbole hinzufügen. Da die obige Einführungsmethode beschrieben wurde, werden wir sie hier beschreiben. Vorausgesetzt, wir haben das Symbol bereits in das Projekt eingeführt, können wir das Projekt zunächst auf den lokalen Computer herunterladen. Dies wurde in der vorherigen Methode erwähnt, daher werde ich es hier nicht beschreiben. Kopieren Sie dann die Dateien mit den Endungen eot, woff2, woff, ttf und svg und weisen Sie diese Dateien dann einer Datei in unserem Projekt zu:

Importieren Sie diese Dateien anschließend wie folgt in die CSS-Datei:

@Schriftart {
	Schriftfamilie: „Iconfont“;
	Quelle: URL ('../fonts/iconfont.eot');
	Quelle: URL('../fonts/iconfont.eot?#iefix') Format('embedded-opentype'), /* IE6-IE8 */
	url('../fonts/iconfont.woff2') format('woff2'),
	url('../fonts/iconfont.woff') format('woff'), /* Moderne Browser */
	url('../fonts/iconfont.ttf') format('truetype'),/* Safari, Android, iOS */
	url('../fonts/iconfont.svg#iconfont') format('svg'); /* Legacy-iOS */
}

Die obige Schriftfamilie wird von uns selbst definiert. Wir müssen diese Dateien in die URL einführen. Die einfachen Anführungszeichen in url() sind die URL-Adressen dieser Dateien relativ zu diesen CSS-Dateien. #iefix und #iconfont sind unverzichtbar. #iefix ist festgelegt und der Name in #iconfont ist der Name in font-family . Sie müssen nach dem entsprechenden Dateinamen hinzugefügt werden. Der Inhalt in format() kann nicht geändert werden. Sie können den obigen Inhalt in Ihren eigenen kopieren und nur die entsprechende URL-Adresse entsprechend dem Suffixnamen ändern. Ändern Sie ihn nicht willkürlich, sonst machen Sie Fehler. Da wir die Symbole darin häufig verwenden werden, müssen wir einige Attribute in eine öffentliche Klasse einfügen, wie unten gezeigt:

[Klasse^="Symbol-"],
[Klasse*="Symbol-"] {
	Schriftfamilie: „Iconfont“;
	Schriftstil: normal;
}

Das bedeutet, dass solange die Klasse icon- es die Attribute font-family und font-style gibt. Der Name font-family ist der Name font-family in @font-face . Wenn wir das class-Attribut verwenden müssen, fügen wir der Klasse des Elements in der htm-Datei einen Namen hinzu, der mit icon- beginnt, wie unten gezeigt:

Anschließend können wir das entsprechende Icon setzen, meist mithilfe von Pseudoelementen, die sich in CSS wie folgt setzen lassen:

Was den Inhalt im Inneren betrifft, ist das vordere \ fixiert und das hintere e799 kommt von hier. Wir gehen zurück zur offiziellen Iconfont-Website, suchen das Symbol in unserem Projekt, bleiben darauf und klicken auf das Bearbeitungssymbol:

Kopieren Sie den Inhalt unter „Unicode (hexadezimal)“:

Das ist es!

Wenn Sie es nicht lokal herunterladen möchten, können Sie auch die Online-Unicode-Kodierung verwenden. Zuerst finden wir die Schnittstelle des obigen Projekts auf der offiziellen Iconfont-Website, klicken auf „Unicode“ und dann auf „Kein Code, klicken Sie hier, um zu generieren“. Dann wird ein Link angezeigt:

Kopieren Sie den Linkinhalt, sodass wir die Datei nicht in das Projekt kopieren müssen. Fügen Sie einfach den obigen Linkinhalt in die CSS-Datei ein:

@Schriftart {
  Schriftfamilie: „Iconfont“; /* Projekt-ID 2074612 */
  Quelle: URL ('//at.alicdn.com/t/font_2074612_ndaz958615n.eot');
  Quelle: URL ('//at.alicdn.com/t/font_2074612_ndaz958615n.eot?#iefix') Format ('embedded-opentype'),
  url('//at.alicdn.com/t/font_2074612_ndaz958615n.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_2074612_ndaz958615n.woff') format('woff'),
  URL ('//at.alicdn.com/t/font_2074612_ndaz958615n.ttf') Format ('TrueType'),
  url('//at.alicdn.com/t/font_2074612_ndaz958615n.svg#iconfont') format('svg');
}

Schreiben Sie dann in CSS:

[Klasse^="Symbol-"],
[Klasse*="Symbol-"] {
	Schriftfamilie: „Iconfont“;
	Schriftstil: normal;
}

Danach müssen Sie aufschreiben, was der Inhalt im Inhalt ist. Dies wurde oben ausführlich erklärt und wird hier nicht wiederholt:

.icon-tianmao::vor {
	Inhalt: '\e799';
}

Dann ist es auch in der HTML-Datei notwendig. Diese werden in der zweiten Methode ausführlich erklärt, daher werde ich hier nicht näher darauf eingehen:

<i Klasse="icon-tianmao"></i>

Dies ist das Ende des Artikels zur Verwendung von Schriftsymbolen in CSS. Weitere relevante Inhalte zu CSS-Schriftsymbolen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!