Font Awesome 無料で綺麗なアイコンを使う

こんにちは。レモンティーです。

今回は、Webサイトやアプリで綺麗なアイコンを無料で使えるFontAwesomeを使います。

↓公式
fontawesome.com


公式ページにある↓のコードをheadにコピペすればすぐ使えます。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">

はてなブログで全ページで使いたい場合は 詳細設定>headに要素を追加 でOK)

使い方は簡単で

<i class="fa fa-ban"></i>

のようにします。

faの部分はアイコンの大まかな分類ですが、無料で使えるのはfa(fas)とfabだけなので
普段はfaでブランドのロゴの時だけfabと考えて大丈夫です。

そしてfa-banの部分で名前を指定します。

例えば  は

<i class="fa fa-burn"></i>

です。

フォントの名前についても公式サイトに一覧があります↓。
fontawesome.com


回転や大きさの変化もできます。


・大きさの変化 fa-nx

<i class="fab fa-android fa-1x"></i>
<i class="fab fa-android fa-3x"></i>
<i class="fab fa-android fa-5x"></i>


・回転 fa-rotate-90


<i class="fa fa-fighter-jet fa-rotate-90"></i>
<i class="fa fa-fighter-jet fa-rotate-180"></i>
<i class="fa fa-fighter-jet fa-rotate-270"></i>


また、CSSも適用できます。

<i class="fab fa-apple fa-3x red"></i>

CSS
.red{color:red;}

さらに、共通の親の子にすることで重ねることもできます。
この場合は親がfa-stack、子がfa-stack-nxクラスを持つ必要があります。


<span class="fa-stack fa-3x">
  <i class="fa fa-burn fa-stack-2x red"></i>
  <i class="fab fa-twitter fa-stack-1x blue"></i>
</span>

(はてなブログの場合、改行せず書きましょう。)



要素をクルクル回転させることもできます。

fa-spinでなめらかに

fa-pulseでカクカク  回転します。


<i class="fa fa-sync  fa-spin"></i>
<i class="fa fa-spinner fa-pulse"></i>


公式で他にも色々紹介されています。


今回はこれでおしまいです。
www.sawalemontea.com