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

Grafisches Tutorial zur Installation der MySQL 8.0.13-Dekomprimierungsversion unter Windows

IE6-Schriftart kann nicht definiert werden: Die Größe von 13 Pixeln ist ungültig. IE6 zeigt automatisch eine größere Schriftartlösung an.

Als ich vor einigen Tagen ein Modul einer Webseite...

So verwenden Sie Web-Frontend-Vektorsymbole

Grafisches Tutorial zur Installation der MySQL 8.0.13-Dekomprimierungsversion unter Windows

Lösung für das Problem, dass Docker-Container nicht gestoppt oder beendet werden können

Implementierung von nacos1.3.0, erstellt mit Docker

Die Aktualisierungsseite für die Formularübermittlung springt nicht zum Quellcodedesign

Node verbindet sich mit MySQL und kapselt dessen Implementierungscode zum Hinzufügen, Löschen, Ändern und Prüfen

Grafisches Tutorial zur Installation von MySQL 5.5 unter Win7

Der gesamte Prozess der Implementierung des Zusammenfassungs-Popup-Fensters mit Vue+Element UI

CSS Zurück zum Anfang Codebeispiel

5 coole und praktische Einführung in HTML-Tags und -Attribute

So verwenden Sie CocosCreator zur Tonverarbeitung bei der Spieleentwicklung

Artikel empfehlen

Aufzeichnung des tatsächlichen Prozesses der Verpackung und Bereitstellung des Vue-Projekts

CenterOS7 Installations- und Konfigurationsumgebung jdk1.8 Tutorial

So gestalten Sie die Homepage von Tudou.com

IE6-Schriftart kann nicht definiert werden: Die Größe von 13 Pixeln ist ungültig. IE6 zeigt automatisch eine größere Schriftartlösung an.

Zusammenfassung der Unterschiede zwischen SQL und NoSQL

Fallstricke und Lösungen bei der MySQL-Zeitstempelvergleichsabfrage

So zeigen Sie alle laufenden Prozesse in Linux an

Implementierung der Nginx-Konfiguration für den Multi-Port- und Multi-Domain-Name-Zugriff

Was ist die Funktion und Schreibreihenfolge der Pseudoklasse eines Tags?

Verwandte Vorgänge zum Hinzufügen und Löschen von Indizes in MySQL

So setzen Sie das Root-Passwort in CentOS7 zurück

Detaillierte Erläuterung der Ideen zur Leistungsüberwachung bestimmter Prozesse im Linux-System basierend auf Python

Detaillierte Erklärung zum Upgrade von Softwarepaketversionen unter Linux

Vue realisiert die Funktion zum Hochladen von Fotos auf den PC

JavaScript-Komposition und Vererbung erklärt