私のプロジェクトはVue+要素ですが、この要素にはアイコンが少ないのでAlibaba Cloudのアイコンを紹介します。
Alibaba Cloud アイコン ライブラリのアドレス: https://www.iconfont.cn/home/index
まず、Alibaba Cloud アイコン ライブラリのアカウントが必要です。アカウントをお持ちでない場合は、登録してください。
ここまでで準備作業は完了したので、導入方法を説明していきます。
最初のステップとして、新しいプロジェクトを作成します
「リソース管理」、「マイプロジェクト」をクリックします。
新しいプロジェクト
2 番目のステップは、探しているアイコンを検索し、目的のアイコンの上にマウスを置き、変更されたアイコンをショッピング カートに追加します。
次に、アイコンをカート内の商品に追加します
項目を選択し、「OK」をクリックします
次に、プロジェクト内のフォント クラスをクリックして、アイコンをローカルにダウンロードします。
ダウンロードした圧縮パッケージを解凍すると、ファイルの内容は次のようになります。
iconfont.cssを開いて位置を変更します
直す前に
修正後、[class^="icon-"],[class*="icon-"]を追加
ここのクラス名は、プロジェクトのプロパティのプレフィックス名と一致しています。
3 番目のステップは、変更したフォルダー内のすべてのファイルを、assets の下のアイコン ディレクトリに配置することです。
4 番目のステップ、main.js へのインポート
5番目のステップ、使用テスト
アイコンコードをコピーしてクラスに配置します
アイコンが表示されているのが確認できます
読んだ後は「いいね」を忘れないでください