タグの入れ方

書式

<i class="fa %%アイコン%% %%オプション%%"></i>

例えば、記事に以下のタグを入れると、猫の手のアイコンになります

<i class="fa fa-paw fa-fw"></i>

※fa-fwは固定幅で表示するオプションです

利用可能なアイコン

利用可能なアイコンは以下のURLでご確認ください
http://fontawesome.io/icons/

オプション

利用可能なオプションは公式サイトのexamplesに書かれています
http://fontawesome.io/examples/

アイコンのサイズを変更する

fa-lg fa-2x fa-3x fa-4x fa-5x

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x

アイコンを回転させる

<i class="fa fa-refresh fa-pulse fa-3x"></i>
<i class="fa fa-spinner fa-spin fa-3x"></i>
<i class="fa fa-cog fa-spin fa-3x"></i>
<i class="fa circle-o-notch fa-spin fa-3x"></i>

fa-spin 滑らかに回転します
fa-pulse 8段階で回転する

アイコンを複数重ねる

重ねたいアイコンをfa-stackクラスのタグに入れます。必要に応じてサイズを変更してください

<span class="fa-stack fa-lg">
  <i class="fa fa-camera fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>

※ Qiitaの記事では改行せずに記述してください

自分のサイトでアイコンを使えるようにする

Font Awesomeのサイトにアクセスして[Download]のボタンをクリックします

ダウンロードしたzipファイルをHTTPサーバーのDocumentRootディレクトリに展開します

実行例 (DocumentRootが/var/www/htdocsの場合)

# cd /var/www/htdocs
# unzip ~/font-awesome-4.6.3.zip 
Archive:  /root/font-awesome-4.6.3.zip
   creating: font-awesome-4.6.3/
   creating: font-awesome-4.6.3/css/
  inflating: font-awesome-4.6.3/css/font-awesome.css  
  inflating: font-awesome-4.6.3/css/font-awesome.min.css  
   creating: font-awesome-4.6.3/fonts/
      :

FontAwesomeのバージョンにより、ディレクトリ名が変わります。適宜読み替えてください

HTMLのhead内にfont-awesomeのCSSをリンク付けします

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="font-awesome-4.6.3/css/font-awesome.min.css">
<title></title>
</head>
<body>
<h1>アイコン表示テスト</h1>
<i class="fa fa-bomb fa-3x"></i>
</body>
</html>

実行イメージ

FontAwesomeのライセンスについて

FontAwesomeのライセンスは以下のURLにある通り、オープンソースでGPLフレンドリーになっているので自由に使えます。

ただし、企業のアイコンについてはそれぞれの会社が権利を持ってますので注意が必要です。twitterのアイコンはtweetのリンクに使うなど、その会社の製品やサービスの参照先として使うに留めておいた方が良いでしょう

Qiita の記事にアイコンをつける