CSS verwendet die Alibaba-Vektorbibliothek, um den entsprechenden Positionen schnell ansprechende Symboleffekte hinzuzufügen (Beispielcode).
|
Rufen Sie die Alibaba-Vektorsymbolbibliothek auf Alibaba-Vektorsymbolbibliothek
1. Unicode Dies ist die Verwendung dieser beiden Unicode Wenn Sie mit der Eingabe beginnen, wird automatisch ein Code generiert. Wenn nicht, klicken Sie auf Generieren. Beispiel:
@Schriftart {
Schriftfamilie: „Iconfont“; /* Projekt-ID 1743720 */
Quelle: URL ('//at.alicdn.com/t/font_1743720_lf0mzduk11.eot');
Quelle: URL ('//at.alicdn.com/t/font_1743720_lf0mzduk11.eot?#iefix') Format ('embedded-opentype'),
url('//at.alicdn.com/t/font_1743720_lf0mzduk11.woff2') format('woff2'),
url('//at.alicdn.com/t/font_1743720_lf0mzduk11.woff') format('woff'),
url('//at.alicdn.com/t/font_1743720_lf0mzduk11.ttf') format('truetype'),
url('//at.alicdn.com/t/font_1743720_lf0mzduk11.svg#iconfont') format('svg');
}Das Wichtigste ist Iconfont Gleichzeitig müssen wir auch den entsprechenden URL-Pfad ändern Nehmen wir das erste Beispiel
<!--Ursprüngliche URL-->
Quelle: URL ('//at.alicdn.com/t/font_1743720_lf0mzduk11.eot');
<!--Öffnen Sie nach der geänderten URL den Browser und besuchen Sie die entsprechende URL. Wenn Sie aufgefordert werden, die EOT-Datei herunterzuladen, war die Änderung erfolgreich-->
Quelle: URL ('https://at.alicdn.com/t/font_1743720_lf0mzduk11.eot');Der Verweis auf Symbole in Unicode lautet wie folgt Wählen Sie jetzt auf der persönlichen Seite Unicode aus. Sie können sehen, dass die hinzugefügten Symbole alle unten angezeigt werden. Nehmen Sie die Suche als Beispiel.
Wenn Sie die Maus nach oben bewegen, sehen Sie das Symbol zum Kopieren des Codes. Klicken Sie auf Kopieren Nachfolgend sehen Sie den Beispielcode
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Symbolverwendung</title>
<Stil>
@Schriftart {
Schriftfamilie: „Iconfont“; /* Projekt-ID 1743720 */
Quelle: URL ('https://at.alicdn.com/t/font_1743720_lf0mzduk11.eot');
Quelle: URL ('https://at.alicdn.com/t/font_1743720_lf0mzduk11.eot?#iefix') Format ('embedded-opentype'),
url('https://at.alicdn.com/t/font_1743720_lf0mzduk11.woff2') format('woff2'),
url('https://at.alicdn.com/t/font_1743720_lf0mzduk11.woff') format('woff'),
URL('https://at.alicdn.com/t/font_1743720_lf0mzduk11.ttf') Format('Truetype'),
URL ('https://at.alicdn.com/t/font_1743720_lf0mzduk11.svg#iconfont') Format ('svg');
}
.wrapper {
Breite: 1090px;
Höhe: 300px;
Hintergrundfarbe: Antikweiß;
Rand: 0px automatisch;
Textausrichtung: zentriert;
}
.iconTest::vor {
/*Dies ist der kopierte Symbolcode, geändert in das folgende Format*/
/* Inhalt: ""; */
Inhalt: "\e61a";
Schriftfamilie: "Iconfont";
}
</Stil>
</Kopf>
<Text>
<div Klasse="Container">
<div Klasse="Wrapper">
<span class="iconTest"> : Hallo CSS</span>
</div>
</div>
</body>
</html>Rendern
###Verweis auf Icons in der Font-Klasse Das wird viel einfacher. Neben Unicode befindet sich auf der persönlichen Homepage der Symbolbibliothek „Fonte Class“. Klicken Sie darauf, wählen Sie dann ein beliebiges Symbol aus und kopieren Sie den Code.
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Symbolverwendung</title>
<!--Verwenden Sie es, indem Sie CSS-Ressourcen importieren, und ändern Sie die URL, um https://--> hinzuzufügen.
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1743720_lf0mzduk11.css">
<Stil>
.wrapper {
Breite: 1090px;
Höhe: 300px;
Hintergrundfarbe: Antikweiß;
Rand: 0px automatisch;
Textausrichtung: zentriert;
}
</Stil>
</Kopf>
<Text>
<div Klasse="Container">
<div Klasse="Wrapper">
<!--iconfont zeigt an, dass dies ein Symbolstil ist-->
<!--icon-sousuot bedeutet, dass dies ein Suchsymbol ist-->
<span class="iconfont icon-sousuo"></span><span> : Hallo CSS</span>
</div>
</div>
</body>
</html>Einfacher zu bedienen Manchmal enthält eine komplexe Webseite Verweise auf verschiedene Symbole. Beispielsweise muss vor jeder Spalte in der Navigationsleiste ein Symbol stehen. Hier wird ::before verwendet. Ebenso wird manchmal span verwendet, um auf Symbole zu verweisen. An dieser Stelle können wir die Verwendungsmethode in Font-Class einführen, um die Verwendung in zwei Szenarien zu erreichen.
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Symbolverwendung</title>
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1743720_lf0mzduk11.css">
<Stil>
.wrapper {
Breite: 1090px;
Höhe: 300px;
Hintergrundfarbe: Antikweiß;
Rand: 0px automatisch;
Textausrichtung: zentriert;
}
.iconTest::nach {
Inhalt: "\e61a";
Schriftfamilie: "Iconfont";
}
</Stil>
</Kopf>
<Text>
<div Klasse="Container">
<div Klasse="Wrapper">
<span class="iconfont icon-sousuo"></span><span class="iconTest"> : Hallo CSS</span>
</div>
</div>
</body>
</html>Das Ergebnis ist, dass es vor und nach Hello CSS Suchsymbole gibt. Grund: Wenn wir das importierte CSS öffnen, können wir feststellen, dass es auch Unicode enthält. Daher müssen wir für die spätere Verwendung nur die Font-Class einführen. Der dem Symbol entsprechende Hexadezimalcode wird in Unicode kopiert, was auch ein kleiner Trick ist. Zusammenfassen Damit ist dieser Artikel über die Verwendung der Alibaba-Vektorbibliothek mit CSS zum schnellen Hinzufügen gut aussehender Symboleffekte (Beispielcode) an den entsprechenden Positionen abgeschlossen. Weitere relevante Inhalte zur CSS-Alibaba-Vektorsymbolbibliothek finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
<<: Implementierung zum Erstellen benutzerdefinierter Images mit Dockerfile
>>: Verwendung und Demonstration von ref in Vue
Artikel empfehlen
Natives JS zur Implementierung der Dropdown-Box-Auswahlkomponente
In diesem Artikelbeispiel wird der spezifische JS...
Tutorial zur Installation von MySQL 8.0.11 unter Linux
1. Gehen Sie zur offiziellen Website, um das Inst...
Mehrere Methoden zur horizontalen und vertikalen Zentrierung von Div-Inhalten mit CSS3 Flex
1. Flex-Richtung: (Richtung der Elementanordnung)...
Einführung in Abfragebefehle für gespeicherte MySQL-Prozeduren
Wie unten dargestellt: Wählen Sie den Namen aus m...
Eine benutzerfreundliche Alternative in Linux (Befehl fd)
Der Befehl fd bietet eine einfache und unkomplizi...
Beispielcode zur Implementierung einer QR-Code-Scanbox mit CSS
Normalerweise haben wir ein Scan-Feld, wenn wir d...
Antd + vue realisiert die Idee der dynamischen Überprüfung kreisförmiger Attributformen
Ich hoffe, einige Eigenschaften des Abfrageformul...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.13 winx64 (win10)
In diesem Artikel finden Sie das grafische Tutori...
Lehr- oder Lernprogramm für Webdesign
Abschnitt Studieninhalte Std 1 Webdesign-Übersich...
Beispiele für neue Selektoren in CSS3
Struktureller (Position) Pseudoklassenselektor (C...
Beispiele für JavaScript-Operationselemente
Weitere Informationen zu Bedienelementen finden S...
js implementiert benutzerdefinierte Dropdown-Box
In diesem Artikelbeispiel wird der spezifische JS...
Schritte zum Einrichten und Mounten freigegebener Ordner auf Windows-Host und Docker-Container
Programme in Docker-Containern müssen häufig auf ...
Mehrere Möglichkeiten zum Berechnen des Alters anhand des Geburtstags in MySQL
Ich habe MySQL vorher nicht sehr oft verwendet un...
Einführung in die Überwachung des MySQL MHA-Betriebsstatus
Inhaltsverzeichnis 1. Projektbeschreibung 1.1 Hin...