Springfalfal

SNSリンクなどをサイトに貼り付けるときに、

【instagram】

このように文字だけでなく、インスタグラムの公式アイコンを表示させる方法を紹介します。

SNSアイコンだけでなく

数千〜数万種類のアイコンを無料で使用できるのでぜひ利用しましょう！

• ・　Font Awesomeとは？
• ・　Webアイコンフォントとは？
• ・　Font Awesomeの使い方
• ・　アイコンをサイトに表示する
• ・　アイコンの大きさを変える
• ・　アイコンの色を変える
• ・　おまけ（色々なカスタマイズ）

Font Awesomeとは？

Font Awesome（フォントオーサム）を一言でいうと、

「Webサイトやアプリで使える、文字と同じように扱えるアイコンの詰め合わせセット」です。

通常、Webサイトにアイコンを表示させるには画像を用意する必要がありますが、

Font Awesomeを使えば、

あらかじめ用意されたコード（タグ）をHTMLに一行書くだけで、

様々なアイコンを瞬時に表示させることができます。

Webアイコンフォントとは？

ウェブページ上で文字と同じように表示できるアイコンのことです。

画像でアイコンを貼るのと違い、拡大してもぼやけませんし、色もサイズも簡単に変えることができます。

Font Awesomeの使い方

事前準備

まずは、FontAwesomeを読み込むために必要な次のコードをHTMLの<head>内に記述します。

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

これだけでFontAwesomeを使用する準備が整いました。

Font Awesomeにアクセスする

Font Awesome

使用したいフォントを探す

Font Awesomeにアクセスできたらトップページ中央に検索欄が表示されます。

この検索欄に使用したいアイコン名を入力します。

今回はinstagramアイコンを検索します。

検索結果画面にinstagramに関連するアイコンが表示されるので、

この中から使用したいアイコンを選択します。（プロの表示があるものは有料です。）

アイコンをサイトに表示する

アイコンを選択すると、アイコン詳細ページに移動します。

画面左に表示されるアイコン、

画面右にアイコンを使用するためのコードが表示されます。

このコードをコピーして自分のHTMLに貼り付けるだけで

いつでもアイコンを表示させることができます。

アイコンの大きさを変える

FontAwesomeでは、アイコンの大きさを簡単に変えることができます。

以下のコードをi class="〜"内に書くことでサイズを大きくすることができます。

• fa-lg (1.333…倍)
• fa-2x (2倍)
• fa-3x (3倍)
• fa-4x (4倍)
• fa-5x (5倍)

実際にコードを書いてみます。

<p><i class="fa-brands fa-instagram fa-lg"></i></p>
<p><i class="fa-brands fa-instagram fa-2x"></i></p>
<p><i class="fa-brands fa-instagram fa-3x"></i></p>
<p><i class="fa-brands fa-instagram fa-4x"></i></p>
<p><i class="fa-brands fa-instagram fa-5x"></i></p>

その他のサイズにしたいときは

上の5つのサイズ以外にしたい場合は自分の好きな名前のclassを追加して、

そのclassに対してCSSでサイズ指定しましょう。

<p><i class="fas fa-bomb my-small"></i></p>
<p><i class="fas fa-bomb my-big"></i></p>

.my-small {
  font-size: 0.8em 
  /*0.8倍の大きさに*/}
.my-big {
  font-size: 6em 
  /*6倍の大きさに*/}

アイコンの色を変える

【HTML】<i class="fa-brands fa-instagram my-example"></i>

【CSS】 .my-example {color: ◯◯}

アイコンの色を変えるときには、

iタグに好きな名前のclassを追加し、

それに対してCSSで色を指定します。

たとえば以下のように書きます。

<i class="fa-brands fa-instagram my-gray"></i>
<i class="fa-brands fa-instagram my-skyblue"></i>
<i class="fa-brands fa-instagram my-orange"></i>

.my-gray {color: gray}
.my-skyblue {color: skyblue}
.my-orange {color: #fecb81}

おまけ（色々なカスタマイズ）

回転させる（アニメーション）

<i class="fas fa-tasks fa-spin"></i>

fa-spinというclass名を追加するだけでアイコンをくるくると回すことができます。

<i class="far fa-lemon-o fa-spin"></i>
<i class="fas fa-cog fa-spin"></i>

アイコンを線で囲う

<i class="fas fa-tasks fa-border"></i>

classにfa-borderを足すとアイコンまわりに線をひくことができます。

<i class="fas fa-tasks fa-2x fa-border"></i>

アイコンを重ねる

二つのアイコンを前後に重ねて表示することもできます。

<span class="fa-stack">
<i class="fas fa-cloud fa-stack-2x"></i>
<i class="fa-brands fa-instagram fa-stack-1x"></i>
</span>

• class名をfa-stackと設定したspanタグの中に、２つのアイコンを入れる
• 背面のアイコンをはじめに書き、class名にfa-stack-2xを追加
• 次に前面のアイコンを書き、class名にfa-stack-1xを追加

アニメーション一覧

最後に「Font Awesome Animation」により表現できる動きをまとめました。

動き	class名	コード例
レンチ風	faa-wrench animated	<i class="fab fa-twitter faa-wrench animated"></i>
ブルブル	faa-ring animated	<i class="fas fa-bus faa-ring animated" ></i>
横揺れ	faa-horizontal animated	<i class="fas fa-male faa-horizontal animated"></i>
縦揺れ	faa-vertical animated	<i class="fas fa-futbol-o faa-vertical animated"></i>
点滅	faa-flash animated	<i class="fas fa-star faa-flash animated"></i>
跳ね	faa-bounce animated	<i class="fas fa-music faa-bounce animated"></i>
スピン	faa-spin animated	<i class="fas fa-refresh faa-spin animated"></i>
浮遊	faa-float animated	<i class="fas fa-ship faa-float animated"></i>
パルス	faa-pulse animated	<i class="fas fa-heart faa-pulse animated"></i>
シェイク	faa-shake animated	<i class="fas fa-facebook faa-shake animated"></i>
ジャジャーン	faa-tada animated	<i class="fas fa-plane faa-tada animated"></i>
通過	faa-passing animated	<i class="fas fa-bicycle faa-passing animated"></i>
バック	faa-passing-reverse animated	<i class="fas fa-bicycle faa-passing-reverse animated"></i>
バースト	faa-burst animated	<i class="fas fa-bomb faa-burst animated"></i>

これら以外にもたくさんの使用方法があるので

興味がある方は調べてみてください！

また、サイトの表示速度を意識する場合、

CDNよりもインストールして使用する方法が外部サーバーへの接続時間をカットできるためチェックしてみてください。