So verwenden Sie Web-Frontend-Vektorsymbole

Vorwort

Beim Schreiben von Frontend-Seiten verwenden wir häufig Bilder wie kleine Symbole. Wenn wir Bilder verwenden, ist das Schreiben des Codes schwieriger. Vor kurzem habe ich eine bequeme und praktische Methode gefunden, die direkt verwendet werden kann.

1. Einführung in Bildoperationsmethoden

Zuerst geben wir die URL ein: https://www.iconfont.cn/
Wenn Sie sich diese URL nicht merken können, können Sie auch auf Baidu nach „Alibaba-Vektorkarte“ suchen. Diese URL wird angezeigt.
Nachfolgend empfehle ich zwei weitere häufig verwendete und praktische Methoden.

Methode 1: Schriftklassenreferenz

Gute Kompatibilität, unterstützt IE8+ und alle modernen Browser.
Da die Klasse zum Definieren des Symbols verwendet wird, müssen Sie nur den Bildnamenverweis in der Klasse ändern, wenn Sie das Symbol ersetzen möchten.
Da jedoch grundsätzlich immer noch Schriftarten verwendet werden, werden mehrfarbige Symbole weiterhin nicht unterstützt.

Schritt 1: Wenn wir die Website aufrufen, wird ein Suchfeld angezeigt. Geben Sie den gewünschten Symbolnamen direkt ein oder suchen Sie in der Symbolbibliothek.

Schritt 2: Anschließend in den Warenkorb legen.

Schritt 3: Klicken Sie auf den Warenkorb, um einen neuen Artikel anzulegen und bestätigen Sie. Wenn Sie dem gleichen Artikel später noch Bilder hinzufügen möchten, müssen Sie diesen nicht erneut anlegen.

Schritt 4: Die folgende Seite wird angezeigt. Kopieren Sie den Code und verweisen Sie auf das Codedokument.

<link rel="stylesheet" href="http://at.alicdn.com/t/font_1587841_2580lrwj551.js">

Schritt 5: Denken Sie beim Importieren des Codes daran, " http: " hinzuzufügen.

Schritt 6: Wählen Sie das entsprechende Symbol aus und holen Sie sich den Klassennamen, kopieren und fügen Sie ihn ein, verwenden Sie no-referrer" src="/img/bVbB5hz/view" src="https://cdn.segmentfault.com/v-5e05cb79/global/img/squares.svg" title="image.jpg">

<Text>
<i Klasse\="iconfont icon-xxx"></i>
</body>

Methode 2: Symbolreferenz

Dies ist eine neue Verwendungsweise und wird derzeit empfohlen. Auf der Website finden Sie auch relevante Einführungen als Referenz. Im Vergleich zur obigen Methode 1 weist sie die folgenden Merkmale auf:
Unterstützt mehrfarbige Symbole und ist nicht mehr auf eine einzelne Farbe beschränkt.
Mithilfe einiger Techniken ist es möglich, den Stil wie bei Schriftarten über Schriftgröße und Farbe anzupassen.
Die Kompatibilität ist schlecht, unterstützt werden jedoch nur IE9+ und moderne Browser.
Die Leistung des Browsers beim Rendern von SVG ist durchschnittlich, sogar schlechter als bei PNG.

Schritt 1: Wenn ein Projekt mehrere Symbole verwenden muss, können Sie auch die gewünschten Symbole auswählen und in den Warenkorb legen. Klicken Sie dann auf „Code aktualisieren“ und aktualisieren Sie anschließend den Codereferenzlink. Diese Methode muss lokal heruntergeladen werden.

Schritt 2: Nach dem Herunterladen können Sie einige Dateien im Ordner sehen und die js-Datei auf der Codeseite eingeben.

 <link rel="stylesheet" href="http://at.alicdn.com/t/font_1587841_2580lrwj551.js">
    <script src="iconfont.js"></script>

Schritt 3: Legen Sie das Dateipaket im selben Verzeichnis wie das Projekt ab, damit die Symbolreferenz wirksam werden kann.

Schritt 4: Auf die gleiche Weise kopieren und fügen wir den Bildnamen in die SVG-Datei unter dem Symbol ein, auf das wir verweisen müssen, und ersetzen href="Name ändern".

 <svg Klasse="Symbol" aria-hidden="true">
            <use xlink:href="#icon-079aiqing"></use>
        </svg>

Schritt 5: In der Codepage müssen wir zusätzlich zum Importieren der beiden oben genannten Dateiadressen auch einen Stilcode importieren.

<Stil>
    .Symbol {
        Breite: 1em;
        Höhe: 1em;
        vertikale Ausrichtung: -0,15em;
        füllen: aktuelle Farbe;
        Überlauf: versteckt;
    }
</Stil>

Hier ist der vollständige Code als Referenz

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <title>Alibaba-Vektorbild</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1587841_2580lrwj551.js">
    <script src="iconfont.js"></script>
</Kopf>
<Stil>
    .Symbol {
        Breite: 1em;
        Höhe: 1em;
        vertikale Ausrichtung: -0,15em;
        füllen: aktuelle Farbe;
        Überlauf: versteckt;
    }
</Stil>

<Text>
    <input type="text" placeholder="Suche">
    <svg Klasse="Symbol" aria-hidden="true">
            <use xlink:href="#icon-079aiqing"></use>
        </svg>
</body>
</html>

Code-Effekt:

Zusammenfassen:

Die erste Methode kann direkt durch Importieren verwendet werden. Sie ist schnell und bequem, muss nicht heruntergeladen werden und ist relativ einfach zu verwenden. Der Nachteil besteht jedoch darin, dass sie nur auf eine Weise verwendet werden kann und keine Farben unterstützt.
Die zweite Methode unterstützt mehrere Farben und der Effekt der Einführung mehrerer Bilder ist besser. Der Nachteil besteht darin, dass es in ein lokales Dateipaket heruntergeladen und im selben Verzeichnis abgelegt werden muss, bevor es verwendet werden kann.
Im Allgemeinen sind Alibaba-Vektorgrafiken für Frontend-Entwickler sehr hilfreich und können kostenlos verwendet werden. Sie können die oben genannten Methoden entsprechend Ihren Anforderungen verwenden.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

<<: Zusammenfassung aller HTML-Interviewfragen

>>: Reines CSS zum Lösen des Decken- und Bodenabsaugens in den Implementierungsschritten des H5-Layouts

So verwenden Sie Docker zum Erstellen einer Entwicklungsumgebung (Windows und Mac)

So verwenden Sie Web-Frontend-Vektorsymbole

So verwenden Sie Docker zum Erstellen einer Entwicklungsumgebung (Windows und Mac)

JavaScript zum Implementieren einer einfachen Tab-Leiste zum Wechseln der Inhaltsleiste

Docker erstellt Cluster-MongoDB-Implementierungsschritte

Eine kurze Erläuterung, wie Tomcat den übergeordneten Delegationsmechanismus unterbricht

Eine kurze Diskussion über die alternative Methode von $refs in vue2 in der kombinierten API von vue3

Lösen Sie das Problem verschwindender Docker-Images

Erläuterung der Array-Verarbeitung in React und Redux

Detaillierte Erläuterung der Verwendung des Nginx-Reverse-Proxys zur Lösung domänenübergreifender Probleme

HTML erlaubt teilweise erzwungene Bildlaufleisten, um den Gesamtstil und das Layout nicht zu zerstören.

Vollständiger Vue-Code zur Implementierung der Single-Sign-On-Steuerung

Artikel empfehlen

So verwenden Sie den temporären MySQL 5.7-Tablespace, um Fallstricke zu vermeiden

Implementierung von Zugriffskontrolle und Verbindungsbeschränkung basierend auf Nginx

Der gesamte Prozess der Aktualisierung eines Angular-Einzelprojekts auf mehrere Projekte

Keine chinesische Spezialität: Webentwicklung unter kulturellen Unterschieden

Beispiel für das Hinzufügen von Attributen mithilfe von Stilen in HTML

So verhindern Sie, dass sich vsftpd-Benutzer über SSH anmelden

Detaillierte Erläuterung der Parameteroptimierung table_open_cache und sinnvolle Konfiguration unter MySQL 5.6

Drei Möglichkeiten zum Teilen der Komponentenlogik in React

So legen Sie eine Verzeichnis-Whitelist und eine IP-Whitelist in Nginx fest

Detaillierte Erläuterung der MySQL Limit-Leistungsoptimierung und der Paging-Daten-Leistungsoptimierung

MySQL-Einschränkungstypen und Beispiele

Implementierungsschritte für MySQL-Zusammenführungsergebnisse und horizontale Spleißfelder

So verwenden Sie das href-Attribut des HTML-Tags a, um relative und absolute Pfade anzugeben

Lösung für den ineffektiven Rand von in HTML verschachtelten Divs

MySQL-Datenbank Daten laden, vielfältige Verwendungsmöglichkeiten