Webアイコン-はじめに

アイコンは、Webページ上の特定のアクションまたは機能を表すために使用される記号です。アイコンは、アプリケーションだけでなくドキュメントでも使用され、選択可能または選択不可のいずれかになります。たとえば、アプリケーションのボタンに表示される画像はすべてアイコンであり、これらのボタンは選択可能です。同様に、会社のロゴとしてアイコンを使用する場合、通常は選択できません。

Windows環境では、システムボリュームをミュートすると、以下に示すように、アイコンが表示されます。

Webアイコンを使用して、読み込みページ、無効なオプション、リンク、リダイレクトなどを表すことができます。これらのアイコンは、反転、回転、サイズ変更、境界線、反転、および色付けが可能です。

アイコンフォント

アイコンフォントには、記号とグリフが含まれています。目的のフォントをロードすると、アイコンのクラス名を使用して、そのフォントによって提供される任意のアイコンを使用できます。アイコンにさまざまな色を適用し、CSSプロパティを使用してサイズを変更することもできます。アイコンを提供するいくつかのアイコンライブラリ（フォント）があります。このチュートリアルでは、3つの主要なフォントに焦点を当てています。

• FontAwesome
• ブートストラップグリフィコン
• Googleのマテリアルアイコン

FontAwesome

このフォントは、519個の無料のスケーラブルベクターアイコンを提供します。このライブラリは完全に無料で、個人用と商用の両方で使用できます。これらのアイコンは簡単にカスタマイズできます。もともと、それらはBootstrap用に開発されました。

ブートストラップグリフィコン

これは、ラスター画像形式、ベクター画像形式、およびフォントとして使用できる単色アイコンのライブラリです。フォント形式で250を超えるグリフを提供します。これらのフォントは、Webプロジェクトで使用できます。これらのアイコンは無料ではありませんが、購入しなくてもBootstrapベースのプロジェクトで使用できます。

Googleのマテリアルアイコン

Googleは、「マテリアルデザインガイドライン」に基づいてデザインされた約750個のアイコンを提供しています。 Material Designアイコン。これらのアイコンはシンプルで、最新のWebブラウザをすべてサポートしています。これらのアイコンはベクターベースであるため、スケーラブルでもあります。これらのアイコンを使用するには、フォント（ライブラリ）をロードする必要がありますmaterial-icons。