vue プロジェクトで iconfont フォントアイコンを使用する方法 (自分で svg をアップロードして iconfont を生成する)

1. Alibaba font icon公式サイトにログインします。

1. 上部のナビゲーションバーで、[リソース管理] - [マイプロジェクト] - [新しいプロジェクト] をクリックします。

2. 新しいプロジェクトフォームに記入します

3. 左側で新しく作成したプロジェクト名をクリックします - プロジェクトにアップロードアイコン - アップロードするローカル SVG ファイルを選択します - レビュー保留中、[色の削除と送信] ボタンをクリックします

4. 送信後、「まだコードがありません。ここをクリックして生成」をクリックしてコードアドレスを生成し、コピーします。

方法1：上記リンクを開いてスタイルコードをコピーし、プロジェクト内のstylesフォルダー配下にicon.cssを新規作成し、コピーしたスタイルコードを貼り付けて導入します（2通りの方法から1つを選択） (1)で導入します。

インデックス.css アイコン.css ( @import )

@import "./icon.css";

(2) または、プロジェクト内の main.js にicon.css ( import )を導入します。

import "@/styles/icon.css"

方法 2: フォントアイコンを使用する必要があるページのスタイルに直接導入する

注:コピーしたアドレスの前にhttp:を追加する必要があります。

<style lang="less" scoped> 
@import "http://at.alicdn.com/t/c/font_4153392_o81rmnxariq.css"; 
</style>

方法 3: フォントアイコンファイルをローカルにダウンロードする

ステップ 1. クリックしてローカルにダウンロードします

ステップ 2: ダウンロードしたフォントアイコンファイルを解凍し、ファイル名を font に変更し、フォントフォルダーをプロジェクトの下のスタイルフォルダーにコピーします。

ステップ 3: main.js に導入する

import "@/styles/font/iconfont.css"

   <div class="iconfont icon-shouye"></div>
   <div class="iconfont icon-fenxiang"></div>

図に示すように、設定は成功しました。

要約: 一般的なプロジェクトでは、方法 3 を使用してフォントアイコンファイルをローカルにダウンロードすることを お勧めします。