Font Awesome CDN版 v.5~を使う

Font Awesome v.5 のアイコンを使うには

よく使うアイコン一覧はこちら

アイコンの検索は Awesome Icon でできます。

アイコンのベースのクラスがFont Awesome v.4の .fa から変わり、アイコンによって
| .fas （Solid） | .far （Regular） | .fal （Liight） | .fad （Duotone） | .fab （Brands） |
に別れた。
どのアイコンがどのカテゴリに該当するかは Awesome Icon で確認できる。
SVGに対応している。

CDN


<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.6/css/all.css">

表示させる方法

「HTMLページ内に直接記述する」方法と「CSSに記述する」方法がある。

① HTMLページ内に直接記述する

表示したい場所に記述する（ i タグは任意で span とかでもオケ）

Apple


<i class="fab fa-apple fa-2x" aria-hidden="true"></i> Apple   /*文字サイズfa-2x（2倍）の影響を受けない*/
<i class="fab fa-apple fa-2x" aria-hidden="true">Apple</i>  /*文字サイズfa-2x（2倍）の影響を受ける*/

アイコンに用意された主なクラス


	.fa-2x				…アイコンの大きさ(2倍) 	.fa-1g (1.333…倍), .fa-3x , .fa-4x , .fa-5x …その他のサイズはCSSで変更
	.fa-li				…リストマークとして表示する
	.fa-fw				…等幅表示にする 
	.fa-spin			…アイコンを回転させる
	.fa-rotate-90		…アイコンの表示角度を変える(90度)	.fa-rotate-180 (180度) , .fa-rotate-270
	.fa-flip-horizontal	…水平方向に反転
	.fa-flip-vertical	…垂直方向に反転
	.fa-border			…アイコンの周囲に枠ができる
	.fa-stack			…アイコンを重ねることができる

② CSSに記述する

  • font-family: "Font Awesome 5 Brands"; …ブランドロゴのアイコン
  • font-family: "Font Awesome 5 Free"; …Font Awesome 無償版のアイコン
  • font-family: "Font Awesome 5 Pro"; …Font Awesome Pro 有償版のアイコン

アイコンによっては font-weight: bold; を指定しないと表示しない。

林檎


<p><span class="ringo">林檎</span></p>


.ringo {
	font-size:2em;
	}
.ringo::before {
	font-family: "Font Awesome 5 Brands";
	content: "\f179";
	font-size: 1.2em;
	color: #c00;
	}

組み合わせて使う fa-stack


<span class="fa-stack fa-2x" style="color:#00aced;">
  <i class="fas fa-square fa-stack-2x"></i>
  <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-2x">
  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="fas fa-flag fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-2x">
  <i class="fas fa-camera fa-stack-1x"></i>
  <i class="fas fa-ban fa-stack-2x" style="color:Tomato"></i>
</span>

TOP