ホームページ > 記事 > ウェブフロントエンド > Vue の要素を介してアイコン icon を使用する

Vue の要素を介してアイコン icon を使用する

亚连オリジナル: 2018-06-07 13:44:445024ブラウズ

element-ui 独自のアイコンライブラリは十分に完成していないため、サードパーティのアイコンを導入する必要があります。以下に、Vue Element でアイコンを使用する方法のチュートリアルを紹介します。興味のある方は、element-ui に付属のアイコンライブラリがまだ十分ではありません。サードパーティのアイコンを導入する必要があります。自分で使用する場合、いくつかの質問については、いくつかのチュートリアルを参照して詳細に記録します

私たちの場合、最初の選択肢はもちろん Alibaba アイコンライブラリです

チュートリアル: 1 Alibaba を開きます。アイコン、登録 > ログイン > アイコン管理 > マイプロジェクト

アイコン管理 > をクリックして、

新しいプロジェクト

好きなようにプロジェクト名を入力します。接頭辞に注意してください。element-ui に付属するアイコン (接頭辞: el-icon) と同じ名前ではありません。

設定後、[新規]をクリックします

プレフィックスに注意してください。設定後、「新規」をクリックします

次に、Alibaba アイコンのホームページに戻り、必要なアイコンライブラリをクリックします。ショッピングカートへの一括インポートがないため、通常は 1 つずつクリックする必要があり、無駄です。次に、コンソールに入力してください次のコードをバッチでインポートします

var icons = document.querySelectorAll(&#39;.icon-gouwuche1&#39;);
 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; }

緑色のボックス内のデータは一貫している必要があります