Das diesmal verwendete kostenlose Schriftartensymbol ist iconfont
1. Klicken Sie auf mich, um zur offiziellen Website zu gelangen
2. Spezifischer Prozess
1. Suchen Sie das gewünschte Symbol im Suchfeld oben, fügen Sie es dann dem Warenkorb hinzu und klicken Sie nach der Auswahl auf den Warenkorb in der oberen rechten Ecke. 2. Zum Projekt hinzufügen. Wenn ein
Artikel vorhanden ist, wählen Sie den aus Element zum Hinzufügen. Wenn kein Element vorhanden ist, erstellen Sie das Element.
3. Geben Sie nach der Bestätigung Ihr Projekt ein (Sie können alle Symbole in Ihrem Projekt sehen), klicken Sie, um es auf die lokale Datei herunterzuladen.
4. Entpacken Sie es und erstellen Sie einen Iconfont-Ordner unter Assets unseres Projekts und kopieren Sie alle Dateien im dekomprimierten Paket in den Iconfont-Ordner. 5. Gehen Sie
zu Main.ts oder main.js, um Assets zu importieren -> Iconfont -> Iconfont.css und Iconfont.js global
// 引入阿里云字体图标css
import '@/assets/iconfont/iconfont.css';
import '@/assets/iconfont/iconfont.js';
3. Öffnen Sie unsere Schriftartenvorschaudatei. Sie können die Klasse und den Unicode-Code jedes Symbols sehen
Der Dateipfad befindet sich in Assets -> Iconfont -> demo_index.html, nach dem Öffnen sieht es so aus
4. Überprüfungspraxis
下面以icon-user为例
1. Verwendung des Klassenstils
<span class="iconfont icon-user"><span>
2. Verwendung von Unicode
Etiketten können auch direkt verwendet werden
<span></span>
3. Der Pseudoklassenselektor ähnelt ein wenig regulärem Code例如\e64b
Dies wird im Allgemeinen verwendet, um das Symbol an einer bestimmten Position auf der Seite zu platzieren. Legen Sie
diesen Code im Inhalt von ::before und ::after fest. Dieser Code befindet sich im Inhaltscode des entsprechenden Symbols unter Assets -> Iconfont -> Iconfont .css
div::before{
content: '\e64b'
}
5. Warum möchten Sie diesen Artikel schreiben?
Denn jedes Mal, wenn Sie ein neues Projekt starten oder ein persönliches Projekt neu erstellen, müssen Sie einige Zeit damit verbringen, viele Tutorial-Artikel zu lesen. Sie können viel Zeit sparen, indem Sie einfach selbst einen Artikel schreiben, sich Notizen machen und ihn später bei Bedarf durchgehen Es.