So verwenden Sie Web-Frontend-Vektorsymbole

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

Artikel empfehlen

Eine kurze Analyse von MySQL-Sperren und -Transaktionen

MySQL selbst wurde auf Basis des Dateisystems ent...

Vollständiges Beispiel der Kapselung der globalen Toast-Komponente durch Vue

Inhaltsverzeichnis Vorwort 1. Mit vue-cli 1. Defi...

So erstellen Sie Ihren eigenen privaten Nexus-Server unter Linux

Dieser Artikel beschreibt, wie man über Docker ei...

Zusammenfassung der Verwendung von setTimeout() in JavaScript

Inhaltsverzeichnis 1. Einleitung 2. Der Unterschi...

Analyse der Ursache des Docker-Fehlers Beendet (1) vor 4 Minuten

Docker-Fehler 1. Überprüfen Sie die Ursache Docke...

Welche Wissenssysteme brauchen Webdesigner?

Produktdesigner sind mit komplexen und großen Fert...

Das Laufschriftelement implementiert Effekte wie scrollende Schriften und Bilder

Mit dem Laufschriftelement können Sie einfache Gle...

So konfigurieren Sie den virtuellen Nginx-Host in CentOS 7.3

Experimentelle Umgebung Eine minimal installierte...

Eine detaillierte Einführung in den Ausführungsmechanismus von JavaScript

Inhaltsverzeichnis 1. Das Konzept von Prozess und...

Erste Schritte mit den JavaScript-Grundlagen

Inhaltsverzeichnis 1. Wo man JavaScript schreibt ...