FontAwesomeアイコン

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

フォントライブラリの読み込み

Font Awesomeライブラリをロードするには、次の行をコピーしてWebページの<head>セクションに貼り付けます。

<head>
   <link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
</head>

アイコンの使用

FontAwesomeにはいくつかのアイコンがあります。それらの1つを選択し、アイコンクラスの名前を<body>タグ内の任意のHTML要素に追加します。次の例では、インドの通貨のアイコンを使用しています。

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
   </head>
	
   <body>
      <i class = "fa fa-inr"></i>
   </body>
	
</html>

次の出力が生成されます-

サイズの定義

以下に示すように、CSSを使用してアイコンのサイズを定義し、クラス名と一緒に使用することで、アイコンのサイズを拡大または縮小できます。与えられた例では、サイズを6emと宣言しています。

<html>
   <head>
      <link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
		
      <style>
         i.mysize {font-size: 10em;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-inr mysize"></i>
   </body>
	
</html>

次の出力が生成されます-

色の定義

サイズと同じように、CSSを使用してアイコンの色を定義できます。次の例は、インドの通貨アイコンの色を変更する方法を示しています。

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
		
      <style>
         i.custom {font-size: 6em; color: red;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-inr custom"></i>
   </body>
	
</html>

カテゴリのリスト

Font Awesomeは、次のカテゴリで519個のアイコンを提供します-

Webアプリケーションアイコン
手のアイコン
交通機関のアイコン
性別アイコン
ファイルの種類のアイコン
スピナーアイコン
フォームコントロールアイコン
支払いアイコン
チャートアイコン
通貨アイコン
テキストエディタのアイコン
方向アイコン
ビデオプレーヤーのアイコン
ブランドアイコン

これらのアイコンのいずれかを使用するには、この章に記載されているプログラムのクラス名を目的のアイコンのクラス名に置き換える必要があります。このユニット（Font Awesome）の次の章では、さまざまなFontAwesomeアイコンの使用法とそれぞれの出力についてカテゴリ別に説明しました。