ホームページ >ウェブフロントエンド >jsチュートリアル >Vue の要素を介してアイコン icon を使用する
element-ui 独自のアイコン ライブラリは十分に完成していないため、サードパーティのアイコンを導入する必要があります。以下に、Vue Element でアイコンを使用する方法のチュートリアルを紹介します。興味のある方は、element-ui に付属のアイコン ライブラリがまだ十分ではありません。サードパーティのアイコンを導入する必要があります。自分で使用する場合、いくつかの質問については、いくつかのチュートリアルを参照して詳細に記録します
私たちの場合、最初の選択肢はもちろん Alibaba アイコン ライブラリです
チュートリアル: 1 Alibaba を開きます。アイコン、登録 > ログイン > アイコン 管理 > マイ プロジェクト
アイコン管理 > をクリックして、
新しいプロジェクト
新しいプロジェクト
好きなようにプロジェクト名を入力します。接頭辞に注意してください。element-ui に付属するアイコン (接頭辞: el-icon) と同じ名前ではありません。
設定後、[新規]をクリックします
プレフィックスに注意してください。設定後、「新規」をクリックします
次に、Alibaba アイコンのホームページに戻り、必要なアイコン ライブラリをクリックします。ショッピング カートへの一括インポートがないため、通常は 1 つずつクリックする必要があり、無駄です。次に、コンソールに入力してください 次のコードをバッチでインポートします
var icons = document.querySelectorAll('.icon-gouwuche1'); var auto_click = function(i) { if (i < icons.length) { setTimeout(function() { icons.item(i).click(); auto_click(i + 1); }, 600); } }; auto_click(0);
そして Enter をクリックすると、このライブラリのセットのすべてのアイコンがショッピング カートに追加されます
ページ上のショッピング カートをクリックします
ページの右側にあるショッピング カート アイコンをクリックして、
作成したプロジェクトにすべてのアイコンを追加します
追加
fontClass を設定し、ローカルにダウンロードします
ダウンロードローカルで解凍します
解凍後、これらのファイルを取得します。画像内の円を開きます
次のコードをファイルに追加します。注: el-icon-third は、前に設定した 2 番目の el-icon です。 - third の前にスペースがあります
[class^="el-icon-third"], [class*=" el-icon-third"]/*这里有空格*/ { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
緑色のボックス内のデータは一貫している必要があります
2. 上記を設定した後、src-assets の下に作成した vue プロジェクトを開きます。すべてのファイルを main.js にインポートします
忘れずにインポートしてから、もう一度npm run dev
を実行します3. Alibaba アイコンでプロジェクトを開き、欲しいアイコンコード
アイコンコード: el-icon-ump-qianniudaidise
npm run dev
一下
3.打开在阿里icon的项目,复制你想要的图标代码
图标代码:el-icon-ump-qianniudaidise
上記は私が皆さんのためにまとめたものは、将来皆さんのお役に立てば幸いです。 関連記事:
jQuery 同じイベントが繰り返し迅速にトリガーされるのを防ぐ方法
以上がVue の要素を介してアイコン icon を使用するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。