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

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

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

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>

アイコンを使用する

Font Awesomeはいくつかのアイコンを提供します。いずれかを選択し、アイコンクラスの名前を<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を使用してアイコンのサイズを定義し、クラス名とともに使用することにより、アイコンのサイズを拡大または縮小できます。この例では、サイズを6 emとして宣言しています。

<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）では、さまざまなFont Awesomeアイコンの使用方法とそれぞれの出力をカテゴリごとに説明しました。

Web-icons-font-awesome-icons

目次