Informationen zur Verwendung des Iconfont-Vektorsymbols von Alibaba in Vue

Es gibt viele Importmethoden im Internet, und die offizielle Seite bietet auch drei Importmethoden an, aber die meisten Leute werden nach dem Importieren nichts anzeigen oder können den Stil nicht anpassen. Die folgende Methode hat die oben genannten Probleme nicht und ist derzeit die beste Einführungsmethode.

1. Die Website der Alibaba-Vektorbibliothek erfordert vor der Nutzung eine Anmeldung. Bitte registrieren Sie sich und melden Sie sich zuerst an.

2. Suchen Sie nach der Anmeldung nach dem gewünschten Symbol, z. B. Benutzer, Einkaufswagen usw.

3. Bewegen Sie die Maus auf das gewünschte Symbol und klicken Sie auf „Zur Bibliothek hinzufügen“. Es wird empfohlen, es nicht direkt durch Kopieren des SVG-Codes oder andere Importmethoden zu importieren. Am besten fügen Sie es zuerst zur Bibliothek hinzu und laden es dann herunter.

4. Öffnen Sie den Einkaufswagen in der oberen rechten Ecke der Website und klicken Sie auf das von Ihnen ausgewählte Symbol „Zu Artikeln hinzufügen“.

5. Laden Sie es lokal herunter. Sie erhalten ein komprimiertes Paket. Entpacken Sie es in den aktuellen Ordner

6. Der folgende Inhalt wird angezeigt. Kopieren Sie alle Dateien außer der, die mit „Demo“ beginnt, in den Ordner „Iconfont“ unter dem Ordner „Asset“ des Projekts. Wenn es keinen solchen Ordner gibt, erstellen Sie selbst einen neuen Ordner.

7. Öffnen Sie anschließend die Datei demo_index.html im entpackten Ordner mit einem Browser. Diese Codes entsprechen den einzelnen Symbolen und werden später verwendet.

8. Schreiben Sie dies in den Code, und Ihre Projektwebseite zeigt das erste Symbol an, das Symbol, das dem obigen Bild entspricht == &#xe601 ==

<Vorlage>

 <span class="iconfont">&#xe601;</span>
<Vorlage>

<Skript>
    importiere '../asset/iconfont/iconfont.css'; //Dies ist der Pfad zu Ihrer iconfont.css, der sich von meiner unterscheiden kann</script>

9. Um den Symbolstil zu ändern, ändern Sie einfach die Klasse .iconfont im Stiltag.

<Vorlage>

 <span class="iconfont">&#xe601;</span>
<Vorlage>

<Skript>
    importiere '../asset/iconfont/iconfont.css'; //Dies ist der Pfad zu Ihrer iconfont.css, der sich von meiner unterscheiden kann</script>


<Stil>
.iconfont {
  Schriftfamilie: "Iconfont" !wichtig;
  Schriftgröße: 16px;
  Schriftstil: normal;
  -webkit-font-smoothing: Kantenglättung;
  -moz-osx-font-smoothing: Graustufen;
}
</Stil>

10. Fertig. Auf der Seite, auf der Sie das Symbol verwenden möchten, import '../asset/iconfont/iconfont.css'; auf dieser Seite.

11. Beachten Wenn Sie einige neue Symbole aus der Alibaba Vector Library hinzufügen möchten, müssen Sie den Iconfont-Ordner im Projekt löschen und erneut bei Schritt 2 dieses Artikels beginnen. Wählen Sie sie aus, laden Sie sie herunter und importieren Sie sie.

Dies ist das Ende dieses Artikels über Vue, das Alibabas Iconfont-Vektorsymbole verwendet. Weitere relevante Inhalte zu Vue-Vektorsymbolen finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!