Web-icons-introduction

提供:Dev Guides
移動先:案内検索

Webアイコン-はじめに

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

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

ミュート

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

アイコンフォント

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

  • 素晴らしいフォント
  • ブートストラップグリフィコン
  • Googleのマテリアルアイコン

素晴らしいフォント

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

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

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

Googleのマテリアルアイコン

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