HTMLでアイコンのサイズを設定する

この記事では、HTML でアイコンのサイズを設定する方法について説明します。

アイコンは、Web ページ上の特定の操作を表す記号です。 アイコン フォント 記号とグリフが含まれます。アイコンを提供し、HTML Web ページで使用できるアイコン ライブラリ (フォント) がいくつかあります。

Web 開発者がよく使用する有名なアイコン フォントは、Font Awesome、Bootstrap Glyphicons、Google のマテリアル アイコン我>です。

• Font Awesome - このライブラリは商用および個人使用において完全に無料です。このフォントは 519 個の無料のスケーラブルなベクター アイコンを提供します。これらは簡単にカスタマイズでき、元々は Bootstrap で開発されました。

• Bootstrap Glyphicons - これは、ラスター イメージ形式、ベクター イメージ形式、およびフォントで使用できるモノクロ アイコン ライブラリです。フォント形式で 250 を超えるグリフが提供されます。これらのフォントは Web プロジェクトで使用できますが、無料ではありません。

• Google 用マテリアル アイコン - Google は「マテリアル デザイン ガイドライン」に基づいて 750 個のアイコンをデザインし、セットとして提供されています。これらのアイコンはマテリアル デザイン アイコンと呼ばれます。ほとんどすべての Web ブラウザがこれらのアイコンをサポートしています。これらのアイコンを使用するには、フォント（ライブラリ）素材のアイコンを読み込む必要があります。

以下の例では、上記のアイコン フォント ライブラリを使用してみましょう。

素晴らしいフォントアイコン

以下の例では、

まず、

• Font Awesome ライブラリをロードしました。

次に、アイコンの 1 つを取得し、そのアイコン クラスの名前を
• タグ内の HTML 要素に追加します。

次に、CSS を使用してアイコンを定義し、クラス名とともに使用することで、アイコンのサイズを大きくします。
サイズを 100px として宣言しました。

• リーリー
出力でわかるように、インドの通貨のアイコンを使用し、CSS を使用してそのサイズを定義しました。

Google マテリアル アイコン

以下の例では、

マテリアル アイコン ライブラリをロードしました。

• 次に、アイコンの 1 つを取得し、そのアイコン クラスの名前を

  タグ内の HTML 要素に追加します。

• アクション カテゴリに属しているため、traffic
という名前のアイコンを使用しました。

• 次に、CSS を使用してアイコンを定義し、クラス名とともに使用することで、アイコンのサイズを大きくします。

• リーリー

  出力でわかるように、信号機アイコンを使用し、CSS を使用してそのサイズを定義しました。

ガイドグリフ

以下の例では、

まず、Bootstrap Glyphicons ライブラリをロードしました。

次に、アイコンの 1 つを取得し、そのアイコン クラスの名前を
• タグ内の HTML 要素に追加します。

• この例では、クラス名

  tree-decidious

  を持つ tree
という名前のアイコンを使用しています。

• リーリー 出力でわかるように、ツリーのアイコンを使用し、CSS を使用してそのサイズを定義しました。

以上がHTMLでアイコンのサイズを設定するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。