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
Einführung mehrerer benutzerdefinierter Schriftarten in CSS3
Heute habe ich ein Problem in HTML gefunden. Es s...
Warum sollten MySQL-Felder NOT NULL verwenden?
Ich habe vor Kurzem in einer neuen Firma angefang...
Detailliertes Tutorial zur Nginx-Installation
1. Kurze Einführung in Nginx Nginx ist ein kosten...
Implementierung der MySQL Master-Slave-Statusprüfung
1. Überprüfen Sie den Synchronisierungsstatus der...
Zusammenfassung verschiedener Methoden für Vue zum Erreichen dynamischer Stile
Inhaltsverzeichnis 1. Ternäres Operatorurteil 2. ...
Das WeChat-Applet implementiert feste Header- und Listentabellenkomponenten
Inhaltsverzeichnis brauchen: Funktionspunkte Rend...
Detaillierte Analyse der Prinzipien und der Verwendung von MySQL-Ansichten
Vorwort: In MySQL sind Ansichten wahrscheinlich e...
Gründe und Lösungen für langsame MySQL-Abfragen, die beim Senden von Daten hängen bleiben
Weil ich ein Python-Programm geschrieben und inte...
Verwenden Sie die vertikale Ausrichtung, um Eingabe und Bild auszurichten
Wenn Sie Eingabe und Bild in dieselbe Zeile setzen...
CSS-Probleme bei der gemeinsamen Verwendung von „Position:fixed“ und „Margin-top“ auf Elementen derselben Ebene
Problembeschreibung Ich möchte CSS verwenden, um ...
PHP geplante Backup MySQL und mysqldump Syntax-Parameter detailliert
Lassen Sie uns zunächst einige gängige Anwendungs...
Beispielcode zum Ändern des Stils anderer Tags durch Bewegen der Maus mithilfe von CSS
Vorwort: Soweit ich weiß, kann CSS derzeit nur de...
So löschen Sie eine Eigenschaft eines Objekts in JavaScript
1. löschen delete ist die einzige wirkliche Mögli...
Detaillierte Beschreibung des komponentenbasierten Front-End-Entwicklungsprozesses
Hintergrund <br />Studenten, die am Front-En...
IIS7 IIS8 http springt automatisch zu HTTPS (Port 80 springt zu Port 443)
IIS7 muss bestätigen, ob das pseudostatische Modu...