CSS verwendet die Alibaba-Vektorbibliothek, um den entsprechenden Positionen schnell ansprechende Symboleffekte hinzuzufügen (Beispielcode).

CSS verwendet die Alibaba-Vektorbibliothek, um den entsprechenden Positionen schnell ansprechende Symboleffekte hinzuzufügen (Beispielcode).

Rufen Sie die Alibaba-Vektorsymbolbibliothek auf

Alibaba-Vektorsymbolbibliothek

  • Wählen Sie das gewünschte Symbol aus und klicken Sie auf „Zur Bibliothek hinzufügen“.
  • Nachdem Sie Ihre Auswahl getroffen haben, klicken Sie auf das Einkaufswagen-Symbol in der oberen rechten Ecke (vorausgesetzt, Sie sind angemeldet. Es wird empfohlen, sich über GitHub anzumelden).
  • Klicken Sie anschließend rechts auf „Zum Projekt hinzufügen“.
  • Du kannst es später auf deiner persönlichen Homepage sehen

1. Unicode
2.Schriftklasse

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.

Bildbeschreibung hier einfügen

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: "&#xe61a;"; */
            Inhalt: "\e61a";
            Schriftfamilie: "Iconfont";
        }
    </Stil>
</Kopf>
<Text>
    <div Klasse="Container">
        <div Klasse="Wrapper">
            <span class="iconTest"> : Hallo CSS</span>
        </div>
    </div>
</body>
</html>

Rendern

Bildbeschreibung hier einfügen

###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

Eine dauerhafte Lösung für MySQLs Unfähigkeit, Chinesisch zu erkennen

In den meisten Fällen unterstützt MySQL Chinesisc...

Erläuterung der MySQL-Leistungsprüfung durch den Befehl „show processlist“

Der Befehl „show processlist“ ist sehr nützlich. ...

Lösung für das Problem, dass es beim Klicken auf „Alles auswählen“ in der Shuttle-Box von Element bei großen Datenmengen hängen bleibt

Inhaltsverzeichnis Lösung 1: Kopieren Sie die Übe...

Was sind die Unterschiede zwischen var let const in JavaScript

Inhaltsverzeichnis 1. Wiederholte Erklärung 1,1 v...

Beispielcode für ein einfaches, nahtlos scrollendes Karussell, implementiert mit nativem Js

Das einfache, nahtlos scrollende Karussell weist ...

Nutzerbedürfnisse führen zu marketingorientiertem Design

<br />Zu jedem unserer Themen bespricht das ...

Nginx leitet dynamisch an Upstream weiter, entsprechend dem Pfad in der URL

In Nginx gibt es einige erweiterte Szenarien, in ...

Mysql5.7.14 Linux-Version Passwort vergessen perfekte Lösung

Fügen Sie in der Datei /etc/my.conf unter [mysqld...

So verwenden Sie das Docker-Plugin, um Projekte remote auf Cloud-Servern in IDEA bereitzustellen

1. Öffnen Sie Port 2375 Bearbeiten Sie docker.ser...

CentOS7-Upgrade des Kernels kernel5.0 Version

Upgrade-Prozess: Ursprüngliches System: CentOS7.3...

CSS-Tipps zur Steuerung der Wiedergabe und Pause von Animationen (sehr praktisch)

Heute stelle ich einen sehr einfachen Trick vor, ...

Detaillierte Erläuterung zum Einrichten einer statischen IP-Netzwerkkarte für die virtuelle CentOS 8-VMware-Maschine für den Zugriff auf das Internet

Erster Schritt: Klicken Sie in VMware auf "B...

Optimierung der Leistung von Paging-Abfragen für MySQL mit mehreren zehn Millionen Daten

Wenn die Datenmenge in MySQL groß ist, wird die S...

Richtige Verwendung der Vue-Funktion Anti-Shake und Throttling

Vorwort 1. Entprellen: Nach dem Auslösen eines Ho...

Beispiel für die Verwendung von MySQL zum Zählen der Anzahl unterschiedlicher Werte in einer Spalte

Vorwort Die in diesem Artikel implementierte Anfo...