ホーム>Web デザインのチュートリアル>HTMLチュートリアル

小さなWebフロントエンドベクトルアイコンの使用方法

著者：Eve Cole 更新時間：2025-04-10 03:16:01
序文

フロントエンドページを書くとき、私たちはしばしば小さなアイコンのようないくつかの写真を使用します。画像を使用すると、コードはより面倒です。最近、便利で実用的な方法を見つけました。直接使用するだけです。
1.画像操作方法を紹介します

最初に、urlを入力します：https：//www.iconfont.cn/

このWebサイトを覚えていない場合は、Baidu：Alibaba Vectorsで検索でき、このWebサイトが表示されます。

以下は、より一般的に使用される2つの便利な方法です。

方法1：フォントクラスリファレンス

  • 優れた互換性は、IE8+、およびすべての最新のブラウザをサポートします。
  • クラスはアイコンを定義するために使用されるため、アイコンを置き換えるときは、クラスの画像名の参照を変更するだけです。
  • ただし、フォントは本質的に使用されるため、マルチカラーアイコンはまだサポートされていません。

ステップ1：Webサイトを入力すると、検索ボックスが表示され、必要なアイコン名を直接入力するか、アイコンライブラリで見つけることができます。

ステップ2：次に、ショッピングカートに追加します。

ステップ3：ショッピングカートをクリックして新しいプロジェクトを作成し、同じプロジェクトに画像を追加する場合は、再度再作成する必要がないことを確認してください。

ステップ4：次に、次のページが表示され、コードをコピーしてコードドキュメントを参照します。

 <link rel = styleSheet href = http：//at.alicdn.com/t/font_1587841_2580lrwj551.js>

ステップ5：コードを導入するときは、 HTTPを追加することを忘れないでください。

ステップ6：対応するアイコンを選択し、クラス名を取得してコピーして貼り付けて貼り付けます。No-Referrer src =/img/bvbb5hz/view src = https：//cdn.segmentfault.com/v-5e05cb79/global/img/img/squares.svg = image.jpg>

 <body> <i class/= iconfont icon-xxx> </i> </body>
方法2：シンボル参照

  • これはまったく新しい使用方法であり、現在推奨される使用方法でもあります。ウェブサイトには、参照に関連する紹介もあります。上記の方法1と比較して、次の特性があります。
  • マルチカラーアイコンはサポートされており、モノクロによって制限されなくなりました。
  • いくつかのトリックを通じて、フォントサイズの色をサポートして、フォントのようなスタイルを調整します。
  • 互換性が低いと、IE9+および最新のブラウザがサポートされています。
  • ブラウザレンダリングSVGのパフォーマンスは平均であり、PNGほど良くありません。

ステップ1：プロジェクトが複数のアイコンを使用する場合は、使用するアイコンを選択してショッピングカートに追加し、[コードの更新]をクリックして、コード参照接続を更新することもできます。この方法はローカルにダウンロードする必要があります。

ステップ2：ダウンロード後、フォルダーにいくつかのファイルが表示され、コードページにJSファイルを導入できます。

 <link rel = styleSheet href = http：//at.alicdn.com/t/font_1587841_2580lrwj551.js> <script src = iconfont.js> </script>

ステップ3：アイコンへの参照が有効になるように、ファイルパッケージを同じディレクトリに配置します。

ステップ4：同じ方法に、アイコンの下の画像名を参照し、SVGの画像名をコピーして貼り付け、href =変更名を置き換える必要があります。

 <svg class = icon aria-hidden = true> <xlink：href =＃icon-079aiqing> </use> </svg>

ステップ5：コードページに上記の2つのファイルアドレスを導入することに加えて、スタイルコードを紹介する必要もあります。

 <style> .icon {width：1em;高さ：1EM;垂直アライイン：-0.15em;塗りつぶし：CurrentColor;オーバーフロー：隠し; } </style>

以下はすべて参照のためのコードです

<！doctype html> <html lang = en> <head> <meta charset = utf-8> <meta name = viewport content = width = device-width、infiartscale = 1.0> <meta http-equiv = x-ua-compatible content = ie = edge> <title = relink reling </title < href = http：//at.alicdn.com/t/font_1587841_2580lrwj551.js> <scrip src = iconfont.js> </script> </head> <style> .icon {width：1em;高さ：1EM;垂直アライイン：-0.15em;塗りつぶし：CurrentColor;オーバーフロー：隠し; } </style> <body> <入力タイプ=テキストプレースホルダー=検索> <svg class = icon aria-hidden = true> <use xlink：href =＃icon-079aiqing> </use> </svg> </body> </html> </html>

コード効果：

要約：

最初の方法は、高速かつ便利で、ダウンロードを必要としないため、使用する方が便利なダウンロードを導入することで直接使用できます。短所は単独でのみ使用でき、色をサポートしません。

2番目の方法は、マルチカラーと複数の写真をサポートしており、複数の写真を導入する効果が向上します。短所はローカルファイルパッケージにダウンロードする必要があり、使用する前に同じディレクトリに配置する必要があります。

全体として、Alibaba Vectorグラフィックはフロントエンド開発者にとって非常に役立ち、自由に使用できます。ニーズに応じて上記の方法を使用できます。

上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。

関連記事