1. 次の図に示すように、Alibaba Icon Library の公式 Web サイトにログインし、独自のプロジェクトを作成して、対応する svg 画像を対応するプロジェクトに追加またはアップロードします。
2. [ローカルにダウンロード] ボタンをクリックしてフォルダをダウンロードします。
3. プロジェクトの src/assets ディレクトリにフォルダー iconfont を作成し、2 番目の手順でダウンロードしたファイルを iconfont フォルダーに貼り付けます (対応するスタイルとアイコン フォントをインポートするだけでよく、カスタマイズすることもできます。プロジェクトの使用法は、対応するファイルをインポートします):
4. main.js にフォント アイコン スタイルを導入します。
| 1 |
import './assets/iconfont/iconfont.css' // フォント アイコン スタイルをインポート |
5. フォント アイコンの使用 (色とフォント サイズを定義することで、フォント アイコンの色とサイズを直接変更できます):
| 1 |
<i class="iconfont icon-arrow-left"></i> |
その中で、iconfont はフォントの既定のフォント ファミリー、icon- はフォントの既定のプレフィックス、arrow-left は私のカスタム アイコン クラスです。アリババ プロジェクト編集の変更:
