So verwenden Sie kleine Web-Front-End-Vektor-Symbole

Autor：Eve Cole Aktualisierungszeit：2025-04-10 03:16:01

Vorwort

Beim Schreiben von Front-End-Seiten verwenden wir oft einige Bilder wie kleine Symbole. Wenn Sie das Bild verwenden, ist der Code problematischer. Vor kurzem fand ich eine bequeme und praktische Methode, verwenden Sie sie einfach direkt.

1. Einführung von Bildbetriebmethoden

Zunächst geben wir die URL ein: https://www.iconfont.cn/

Wenn Sie sich an diese Website nicht erinnern können, können Sie nach Baidu: Alibaba -Vektoren suchen, und diese Website wird angezeigt.

Hier sind zwei häufiger verwendete und bequeme Methoden.

Methode 1: Referenz der Schriftklasse

Gute Kompatibilität unterstützt IE8+und alle modernen Browser.
Da die Klasse zum Definieren von Symbolen verwendet wird, müssen Sie beim Ersetzen von Symbolen nur die Bildnamenreferenz in der Klasse ändern.
Da die Schriftarten jedoch im Wesentlichen verwendet werden, werden mehrfarbige Symbole noch nicht unterstützt.

Schritt 1: Geben Sie die Website ein und wir können ein Suchfeld sehen, direkt den gewünschten Symbolnamen eingeben, oder Sie finden es in der Symbolbibliothek.

Schritt 2: Dann in den Einkaufswagen hinzufügen.

Schritt 3: Klicken Sie auf den Einkaufswagen, um ein neues Projekt zu erstellen und zu bestätigen, dass Sie es nicht erneut neu erstellen müssen, wenn Sie demselben Projekt ein Bild hinzufügen möchten.

Schritt 4: Als nächstes wird die folgende Seite angezeigt, kopieren Sie den Code und verweisen Sie auf das Code -Dokument.

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

Schritt 5: Wenn Sie den Code vorstellen, denken Sie daran, HTTP hinzuzufügen:

Schritt 6: Wählen Sie das entsprechende Symbol aus und erhalten Sie den Klassennamen zum Kopieren und Einfügen, verwenden

 <body> <i class/= iconfont icon-xxx> </i> </body>

Methode 2: Symbolreferenz

Es ist eine brandneue Nutzungsweise und derzeit auch die empfohlene Verwendung. Die Website hat auch relevante Einführungen, auf die Sie sich beziehen können. Im Vergleich zu Methode 1 oben hat es die folgenden Eigenschaften:
Mehrfarbige Ikonen werden unterstützt und nicht mehr durch Monochrom eingeschränkt.
Durch einige Tricks unterstützt es eine Schriftgröße und Farbe, um den Stil wie eine Schriftart anzupassen.
Schlechte Kompatibilität unterstützt IE9+ und moderne Browser.
Die Leistung des Browser -Rendering -SVG ist durchschnittlich und nicht so gut wie PNG.

Schritt 1: Wenn ein Projekt mehrere Symbole verwenden möchte, können Sie auch die Symbole auswählen, die Sie verwenden möchten, und in den Einkaufswagen hinzufügen. Klicken Sie dann auf den Code Aktualisieren und dann die Code -Referenzverbindung aktualisieren. Diese Methode muss lokal heruntergeladen werden.

Schritt 2: Nach dem Herunterladen können Sie einige Dateien im Ordner sehen und JS -Dateien auf der Codeseite einführen.

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

Schritt 3: Stellen Sie das Dateipaket in das gleiche Verzeichnis ein, damit der Verweis auf das Symbol wirksam wird.

Schritt 4: Auf dieselbe Methode müssen wir uns auf den Bildnamen unterhalb des Symbols beziehen, den Bildnamen in SVG kopieren und einfügen und den Namen ändern.

 <svg class = icon aria-hidden = true> <verwenden xlink: href =#icon-079aiqing> </use> </svg>

Schritt 5: Zusätzlich zur Einführung der beiden oben genannten Dateiadressen auf der Codeseite müssen wir auch ein Stück Stilcode vorstellen.

 <Styles> .icon {width: 1em; Höhe: 1em; vertikaler Align: -0,15em; FILL: CurrentColor; Überlauf: versteckt; } </style>

Im Folgenden sind alle Codes als Referenz aufgeführt

 <! DocType html> <html lang = en> <head> <meta charset = utf-8> <meta name = viewPort content = width = Gerätebreite, initial-scale = 1.0> <meta http-äquiv = x-ua-compatible content = ie href = http: //at.alicdn.com/t/font_1587841_2580lrwj551.js> <script src = iconfont.js> </script> </head> <style> .icon {width: 1em; Höhe: 1em; vertikaler Align: -0,15em; FILL: CurrentColor; Überlauf: versteckt; } </style> <body> <Eingabe type = text platzhalter = such> <svg class = icon aria-hidden = true> <verwenden xlink: href =#icon-079aiqing> </use> </svg> </body> </html>

Codeffekt:

Zusammenfassen:

Die erste Methode kann direkt verwendet werden, indem sie schnell und bequem ist und nicht heruntergeladen werden muss, was bequemer zu verwenden ist. Die Nachteile können nur allein verwendet werden und unterstützen keine Farbe.

Die zweite Methode unterstützt mehrfarbige und mehrere Bilder, und der Effekt der Einführung mehrerer Bilder ist besser. Die Nachteile müssen in das lokale Dateipaket heruntergeladen und vor der Verwendung in das gleiche Verzeichnis platziert werden.

Insgesamt sind Alibaba-Vektorgrafiken für Front-End-Entwickler sehr hilfreich und können frei zu verwenden. Sie können die oben genannten Methoden entsprechend Ihren Anforderungen verwenden.

Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.