1. アイコンフォントの紹介
アイコンフォント公式サイト：
iconfont-Alibaba ベクター アイコン ライブラリ
1-ご希望のアイコンを選択してショッピングカートに入れます
2-独自のプロジェクトに追加する
3-ここで選択したフォントは個人的な好みであり、より便利だと思います。他の選択方法もあります。手順は同様です。クリックしてコードを生成し、ローカルにダウンロードします (もちろん、それを使用することを選択することもできます)オンライン）
4-iconfont.cssなどをプロジェクトに追加
5-main.jsにcssファイルを導入する
この時点で、アイコンフォントを使用できます
それの使い方
iconfont.css には、ダウンロードしたアイコンの名前 (my mall など) があります。
次に、i タグを通じて使用する必要がある場所でそれを使用し、対応するクラスを追加します (クラス iconfont を追加することを忘れないでください)。
レンダリング：
2: アイコンフォントの色を動的に変更する
動的に変更せずに色のみを変更する必要がある場合は、iconfont.css ファイルに色を直接設定するだけで済みます。
色を動的に変更したい場合は、iconfont が実際には擬似クラスを使用して実装されていることがわかります。したがって、これは基本的に擬似クラス CSS の動的変更になります。これには、CSS で var 関数を使用する必要があります。私はそうしません。ここでは詳しく説明しません。直接進みましょう。
動的スタイルを使用して色を設定し、変数 color の色を --color に割り当ててから、var を使用して疑似クラスに色を設定します。
このとき、アイコンフォントの色を動的に変更できます。
同様に、疑似クラスの変更を必要とする他の要件も、var を通じて実現できます。