vueプロジェクトでiconfontアイコンとカラーアイコンを使用する

モノクロアイコンの使用

1.最初に選択したアイコンをローカルにダウンロードします

。2。iconfont.cssファイルと接尾辞.eot.ttf .woff.svgのファイルをプロジェクトフォルダー

に追加します。3。iconfontをプロジェクトのmain.jsファイルにインポートします。 cssスタイルファイル、

import "./assets/styles/iconfont.css"

4. iconfont.cssファイルで、状況に応じて他の4つの参照ファイルのパスを変更することに注意してください。そうしないと、エラーが報告されます

。5。次のステップはプロジェクトで使用することです。モノクロアイコンを直接使用します。アイコンに対応するuniCodeコードを使用し、ラベルを追加しますiconfontクラス名は問題ありません

カラーアイコンの使用

1.選択したアイコンをローカル
にもダウンロードします。2。モノクロアイコンで使用する5つのファイルとiconfont.jsファイルを同時にプロジェクトフォルダーに追加し、mainのパスに従ってiconfont.jsをインポートします。 js

import "./assets/styles/iconfont.css"
import "@/assets/iconfont/iconfont.js"

3.次のコードをAPP.vueに追加します

.icon {
    
    
   width: 1em; height: 1em;
   vertical-align: -0.15em;
   fill: currentColor;
   overflow: hidden;
}

4.使用方法：必要な場所に

マルチカラーアイコンに対応するコードを記述します。ダウンロードしたフォルダーのindex.htmlで確認できます。