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>

引用文を装飾

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga reprehenderit architecto consequuntur error totam porro maiores at! Sit, amet, commodi distinctio eius error quia et quam sint quas aspernatur fuga!
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. amet, commodi distinctio eius error quia et quam sint quas aspernatur fuga! 


<div class="quoteBox"><i class="fas fa-quote-left fa-2x pull-left"></i>
	<p>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit..........
	</p>
<i class="fas fa-quote-right fa-2x fa-pull-right"></i></div>


 /*すべて必須ではありません。お好みで。*/
.fa-quote-left:before,
.fa-quote-right:before {
	color:#ccc;
	}
	.quoteBox {
		overflow: hidden;
		padding:2px 4px;
		border:1px #ccc solid;
		}
	.quoteBox p {
		margin: 1em 1em .5em;
		}

TOP