Font Awesomeの使い方（使いそうなアイコン一覧）

Font Awesomeの使い方とよく使うアイコンをコピペできるようにしてみました
MITライセンスで使いやすいですね、バージョンは５で確認しました。

公式サイトはこちらから

ダウンロードして使う
1. cssから使う
2. javascriptから使う
CDN(Font Awesome Kits)で使う
Font Awesome CSS
よく使うアイコン一覧

ダウンロードして使う

こちらからダウンロードして使用することができます。

cssから使う

cssファイルを指定して使いたい場合は、ダウンロードしたディレクトリに入っている
cssディレクトリのall.css(またはall.min.css)とwebfontディレクトリが必要です。

下記のディレクトリ構造を保ったまま、静的ファイルを設置するディレクトリに持って行って配置して..

css
 |_ all.css
webfont

headタグの中などで、下記のように読み込みます。

<head>
  <link href="css/all.min.css" rel="stylesheet" />
</head>

javascriptから使う

読み込める場所にall.js(all.min.js)を配置して、下記のように読み込みます。
必要なファイルが１つで済むので、基本的にはこっちがいいと思います。

<head>
  <script src="all.js"></script>
</head>

CDN(Font Awesome Kits)で使う

Font Awesomeに登録してから、使用するスクリプトのURLを取得するという流れになります。

スタートページから、メールアドレスを入力して登録します。

登録すると、下記のURLで使えるkitが表示されるので、javascriptを読み込んで使用します。
https://fontawesome.com/kits

<script src="https://kit.fontawesome.com/[ここがそれぞれ変わるみたいです].js" crossorigin="anonymous"></script>

Font Awesome CSS

Font Awesomeで定義されているクラスなどについて、使いそうなものだけピックアップして書いています。
公式のメニューのDocのところにいろいろと使い方が書いていました。

アイコンのサイズ

iタグのクラスに下記のクラスを適用するとサイズが変更できます。
fa-xs, fa-2xなど定義されているクラスを使えます。

クラス	サイズ
fa-xs	.75em
fa-sm	.875em
fa-lg	1.33em
fa-2x	2em
fa-3x	3em
fa-4x	4em
fa-5x	5em
fa-6x	6em
fa-7x	7em
fa-8x	8em
fa-9x	9em
fa-10x	10em

<i class="fab fa-php fa-lg"></i>
<i class="fab fa-php fa-2x"></i>
<i class="fab fa-php fa-3x"></i>

上記のアイコンはこんな感じで表示されます。
phpのロゴですね..😄

公式のDocはこちら

アイコンを回転する

アイコンを回転したり、反転したりする時は下記のようにfa-rotate-xxxまたはfa-flip-xxxを使います。

クラス	内容
fa-rotate-90	90°回転
fa-rotate-180	180°回転
fa-rotate-270	270°回転
fa-flip-horizontal	水平方向に反転
fa-flip-vertical	垂直方向に反転
fa-flip-both	垂直方向および水平方向に反転

<div class="fa-3x" style="display:flex;justify-content:space-between;">
  <i class="fas fa-github"></i>
  <i class="fas fa-github fa-rotate-90"></i>
  <i class="fas fa-github fa-rotate-180"></i>
  <i class="fas fa-github fa-rotate-270"></i>
  <i class="fas fa-github fa-flip-horizontal"></i>
  <i class="fas fa-github fa-flip-vertical"></i>
  <i class="fas fa-github fa-flip-both"></i>
</div>

上記のように書くと..
こんな感じで、回転＆反転されました。

公式のDocはこちら

アイコンの回転アニメーション

アイコンに回転アニメーションをつける時は、fa-spinまたはfa-pulseを使います。
fa-spinが普通の回転で、fa-pulseが８ステップの回転（カクカクする）のようです。

<div class="fa-2x">
  <i class="far fa-grin-squint fa-spin"></i>
  <i class="far fa-grin-squint-tears fa-spin"></i>
  <i class="far fa-grin-tongue fa-spin"></i>
  <i class="far fa-hand-point-left fa-spin"></i>
  <i class="far fa-hand-point-left fa-pulse"></i>
</div>

上記のように書くと..
こんな感じで、回転します。一番右のアイコンだけfa-pulseを指定してみました。

公式のDocはこちら

よく使うアイコン一覧

codepenで、Webサイト作成などでよく使いそうな一覧を作ってみました。
クリックするとコピーできます。

See the Pen
[font awesome]often use icons by yasuaki (@include777)
on CodePen.