ホームページ >ウェブフロントエンド >htmlチュートリアル >HTMLでアイコンのサイズを設定する
HTMLでアイコンのサイズを設定する
- 王林転載
- 2023-09-03 11:29:061799ブラウズ
この記事では、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 を使用してアイコンを定義し、クラス名とともに使用することで、アイコンのサイズを大きくします。
-
リーリー 出力でわかるように、インドの通貨のアイコンを使用し、CSS を使用してそのサイズを定義しました。
Google マテリアル アイコン
＃＃＃例＃＃＃以下の例では、
マテリアル アイコン ライブラリをロードしました。
-
次に、アイコンの 1 つを取得し、そのアイコン クラスの名前を
タグ内の HTML 要素に追加します。 - アクション カテゴリに属しているため、traffic という名前のアイコンを使用しました。
次に、CSS を使用してアイコンを定義し、クラス名とともに使用することで、アイコンのサイズを大きくします。
-
リーリー
出力でわかるように、信号機アイコンを使用し、CSS を使用してそのサイズを定義しました。
ガイドグリフ
以下の例では、
まず、Bootstrap Glyphicons ライブラリをロードしました。
- 次に、アイコンの 1 つを取得し、そのアイコン クラスの名前を
- タグ内の HTML 要素に追加します。
- この例では、クラス名
tree-decidious
を持つ tree という名前のアイコンを使用しています。 リーリー 出力でわかるように、ツリーのアイコンを使用し、CSS を使用してそのサイズを定義しました。
以上がHTMLでアイコンのサイズを設定するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。