Font Awesome(Web Fonts with CSS)使用方法

たまに使うと忘れている事が多いので、まとめます。
Ver.5で使えるようになった「SVG with JS」ではなく、従来からある「Web Fonts with CSS」の方です。

使用準備

CDNを使う方法と、ホストするサーバーにファイルを置く方法があります。

CDNを使う場合

html

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.0/css/all.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.2.1/font-awesome-animation.css" type="text/css" media="all" />

font-awesome-animation.cssはアニメーションする場合のみ必要です。

ホストするサーバーにファイルを置く場合

https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself
Font Awesome Free for the Webをダウンロードします。
圧縮ファイルを解凍して、cssフォルダのall.min.cssファイルかall.cssファイルと、webfontsフォルダを使います。
cssファイルからwebfontsフォルダの中のファイルを読んでいるので、パスがずれない様に注意しましょう。

html

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

アイコンを探す

見本ページ

https://fontawesome.com/icons/
カテゴリーをチェックして絞り込みや、キーワードから検索してアイコンを探す事ができます。
Free版を利用する場合は、まず左のFreeをチェックすると良いです。
使用したいアイコンをクリックして個別アイコンページへ移動します。

cheat sheet

使用方法

iタグで使う場合

慣用的にiタグを使いますが、実際はiタグである必要は無いのでspanタグでも良いです。

大きさの変更

クラス	倍率
fa-lg	1.333...倍
fa-2x	2倍
fa-3x	3倍
fa-4x	4倍
fa-5x	5倍

html

<i class="fab fa-github fa-4x"></i>

他の大きさにしたいときはクラスを追加して自分でCSSでサイズ指定できます。

色の変更

iタグに任意の名前のclassを追加し、それに対して自分でCSSで色を指定します。

反転

クラス	反転の方向
fa-flip-horizontal	水平反転
fa-flip-vertical	垂直反転

html

<i class="fab fa-github fa-flip-vertical"></i>

回転

クラス	回転角度
fa-rotate-90	右に90度傾ける
fa-rotate-180	右に180度傾ける
fa-rotate-270	右に270度傾ける

html

 <i class="fab fa-github fa-rotate-270"></i>

アイコンを線で囲む

クラス	内容
fa-border	borderを追加

html

<i class="fab fa-github fa-border"></i>

線の色はデフォルトでは灰色ですが、border-colorで色の変更が可能です。
border-radiusで丸くする事も可能です。

アイコンを重ねる

クラス	付与するタグ
fa-stack	親のタグに追加
fa-stack-2x	背面のアイコンに追加
fa-stack-1x	前面のアイコンに追加

html

<span class="fa-stack">
  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="fab fa-github fa-stack-1x" style="color:white;"></i>
</span>

※背面のアイコンを先に書きます。

等幅

クラス	内容
fa-fw	等幅

リストアイコンとして使用する

クラス	内容
fa-li	リストアイコン

html

<ul class="fa-ul">
  <li><i class="fab fa-github fa-li "></i>GitHub</li>
</ul>

回り込み

クラス	左右どちらか
fa-pull-left	左
fa-pull-right	右

html

<i class="fab fa-github fa-3x fa-pull-left"></i>日本国民は、正当に選挙された国会における代表者を通じて行動し、われらとわれらの子孫のために、諸国民との協和による成果と、わが国全土にわたつて自由のもたらす恵沢を確保し、政府の行為によつて再び戦争の惨禍が起ることのないやうにすることを決意し、ここに主権が国民に存することを宣言し、この憲法を確定する。そもそも国政は、国民の厳粛な信託によるものであつて、その権威は国民に由来し、その権力は国民の代表者がこれを行使し、その福利は国民がこれを享受する。これは人類普遍の原理であり、この憲法は、かかる原理に基くものである。

アニメーション

クラス	動き
faa-bounce animated	バウンス
faa-burst animated	バースト(拡大して消える)
faa-flash animated	フラッシュ(点滅)
faa-float animated	フロート(浮遊)
faa-horizontal animated	ホリゾンタル(横揺れ)
faa-pulse animated	パルス
faa-passing animated	パッシング(左から右へ)
faa-passing-reverse animated	パッシングリバース(右から左へ)
faa-ring animated	リング
faa-shake animated	シェイク
faa-spin animated	スピン
faa-tada animated	tada
faa-vertical animated	バーティカル(縦揺れ)
faa-wrench animated	レンチ

html

<i class="fab fa-github faa-vertical animated"></i>

hover時のみアニメーションさせる場合

animatedをanimated-hoverに変更します。

html

<i class="fab fa-github faa-vertical animated-hover"></i>

親要素へのhover時のみアニメーションさせる場合

親要素にfaa-parent animated-hoverを追加します。
子要素にはfaa-xxxのみ追加します。(animatedはつけない)

html

<div class="faa-parent animated-hover">
  <i class="fab fa-github faa-vertical"></i>
</div>

背景画像として使う

:afterや:beforeなどの疑似要素を使用します。
アイコンはcontentにユニコードで指定します。
font-familyにfontAwesomeを指定し、大きさはfont-sizeで変更可能です。

css

ul {
  padding-left: 2rem;
  position: relative;
}
 
ul li {
  list-style-type: none;
  line-height: 1.5;
}
 
ul li:before {
  font-family: "Font Awesome 5 Brands";
  /* font-family: "Font Awesome 5 Free"; */
  content: "\f09b";
  position: absolute;
  left : 0.5rem;
}

デザインアプリで使う

Adobe Photoshop、Illustrator、XDなどでも使用できます。

ダウンロード

https://fontawesome.com/how-to-use/on-the-desktop/setup/getting-started
Font Awesome Free for the Desktopを押してダウンロードします。

インストール

OTFファイルをインストールします。
デザインアプリを開き、フォントリストの中に「Font Awesome 5 Brands」と「Font Awesome 5 Free」があればインストール完了です。
インストールしたセットは3つですが、Solidは「Font Awesome 5 Free」の細字なので2つで良いです。

使用

https://fontawesome.com/cheatsheet
ユニコードではなくアイコンの方をコピーして、デザインアプリ上でペーストします。
ペースト後にフォント指定をして文字化けを直します。

表示されないとき

font-weightや接頭辞の指定を確認する

分類	説明	font-weight	接頭辞	プラン
SOLID	白抜き	900	fas	free
REGULAR	アウトライン	400	far	pro
LIGHT	線が細いもの	300	fal	pro
BRANDS	ブランドロゴ	400	fab	free

Font AwesomeのCSSを非同期で読み込んでいる場合

非同期をやめてみましょう。

font-familyの記述位置の確認

「*」に設定している場合、「body」など他のタグに変更してみましょう。

ローカルのファイルでダメな場合]

CDNを使うように変更してみましょう。
または、httpでの接続を試してみましょう。

疑似要素で使用している場合

元の要素でfont-weightを指定しているか確認してみましょう。