Webアイコンフォントの使い方【Font Awesome】

twitterとかfacebook、あとinstagramとかのSNSってなかなか続けられないんだよね…

別にそんな自慢できる人生じゃないし、自分が良ければいいんじゃない？
てか、そのSNSのアイコンどうやって表示させるの？画像？

Font Awesome使えば画像じゃなく文字でできるよ！

今回はWebアイコンフォントの『Font Awesome』の使い方について見ていきます。

Font Awesomeって？

使うまでの流れ
フォントだから加工できる

実際にアイコンをそれっぽくする

twitter
facebook
instagram

Font Awesome使えばおしゃれなサイトにしやすくなるので使いこなしていけるようにしていきましょう。

Font Awesomeって？

Font Awesomeには様々な種類のアイコンがあります。

2018/11時点で無料で使えるアイコンが1409個もあり、無料版だけでも有名どころは一通りあります。有料版($60/年)も併せると4566個ものアイコンの種類がある超便利なサービスです。

仕組みはFont Awesomeのサイトに登録されているアイコンフォントのstylesheetを読み込んでるという簡単なものです。

使うまでの流れ

</head>の直前に以下のコードをコピペしてください。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

通常は<head>タグ内のCSS読込の後に貼ればokです。

WordPressの場合は『header.php』の</head>タグ直前に入れてあげましょう。

ちなみにですが、このサイトで使わせてもらっているテーマはSimplicity2でして、Simplicity2ではheader.phpではなく『header-insert.php』の一番最後に貼付けすればOKです。

他のテーマでheader.phpが見つからない場合には、「header　テーマ名」で検索してください。

コピーしたらFont awesomeのサイトにアクセスして実際に使うためのコードを入手していきます。

ここから使いたいアイコンを探して選択します。今回はandroidのアイコンを取得してみます。

クリックした先のアイコン名の下に、以下のようなコードがあるのでクリックしてコピーしましょう。

<i class="fab fa-android"></i>

あとは<p>タグ内などに今のコードを貼付ければとりあえず完了です。

フォントだから加工できる

アイコンが画像だと基本的に大きさを変えるぐらいしかできませんが、アイコンフォントに関してはフォントなので様々な加工ができるようになるので見てみましょう。

文字サイズ

通常のfont-sizeプロパティでも指定できますが、ここでは違った指定方法について見てみます。

class名『”fa-lg”』を追加

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

『fa-lg』というクラスを付けるとアイコンフォントの大きさを付けることが出来ます。なお、fa-lgはfont-size:1.333emと同じになります。

<i class="fab fa-android fa-lg"></i>
<i class="fab fa-android" style="font-size:1.333em"></i>

また、『fa-lg』というクラスよりも大きいサイズを指定する場合には、次のような大きさの指定ができます。

fx-2x = font-size:2em
fx-3x = font-size:3em
fx-4x = font-size:4em

font-size:〇emとfa-〇xで比較

<i class="fab fa-android fa-2x"></i><i class="fab fa-android" style="font-size:2em"></i>
<i class="fab fa-android fa-3x"></i><i class="fab fa-android" style="font-size:3em"></i>
<i class="fab fa-android fa-4x"></i><i class="fab fa-android" style="font-size:4em"></i>

わざわざstyleを指定しないでもいいのでidやclassを新設する必要がなくコーディングの邪魔をしません。

文字の配置

配置といってもすごくわかりづらいので文字サイズを拡大して説明します。

これで見ると配置というよりも、正確にはアイコン自体の余白を持っているのがわかります。

fa-fwの有無を比較

fa-fwあり

私はandroidのスマホが欲しい

fa-fwなし

私はandroidスマホが欲しい

fa-fwクラスを入れるとアイコンフォントと文字の間隔が広くとられているので見やすくなります。

文字の角度

class名fa-rotateを使ってアイコンフォントを回転させます。

<i class="fas fa-android" fa-2x>
<i class="fab fa-android fa-rotate-90 fa-2x">
<i class="fab fa-android fa-rotate-180 fa-2x">
<i class="fab fa-android fa-rotate-270 fa-2x">

fa-rotateのあと90・180・270と90度単位で指定します。それ以外の角度の指定はできません。

文字の反転

class名fa-flipを使って上下左右の反転ができます。

通常

左右反転

通常

上下反転

通常

上下左右反転

fa-flip-horizontal:左右反転
fa-flip-vertical:上下反転

fa-flip-horizontalとfa-flip-verticalの両方を組み合わせることで上下左右反転も作れます。

実際にアイコンをそれっぽくする

ここで冒頭のやりとりを思い出してみましょう。

twitterとかfacebook、あとinstagramとかのSNSってなかなか続けられないんだよね…

別にそんな自慢できる人生じゃないし、自分が良ければいいんじゃない？
てか、そのSNSのアイコンどうやって表示させるの？画像？

Twitter、facebook、instagramのそれぞれのアイコンに色をつけてます。デフォルトでは真っ黒になってしまいます。

カラーリングして本物っぽくしたり、画像を使わずにシェアボタン風にしてみましょう。

各ブランドのカラーコードについてはこちら↓を参考にさせていただきました。

Twitterアイコン

まずTwitterアイコンを加工していきましょう

Twitter

twitterのカラーコードは『#55acee』とのことです。

続いてクリックで押せるボタンにしてみましょう。

twitter

[HTML]

<p id="twitter"><i class="fab fa-twitter fa-fw"></i>twitter</p>

[CSS]

#twitter {
  max-width:300px;
  background-color:#55acee;
  padding:5px;
  box-shadow:0px 5px 0px -2px blue;
  font-weight:bold;
  font-size:1.8em;
  color:#fff;	
  text-align:center;
  margin:0 auto;	
  border-radius:10px;
}
#twitter:active {
  max-width:300px;
  background-color:#55acee;
  padding:5px;
  box-shadow:0px 2px 0px -1px blue;
  font-weight:bold;
  font-size:1.8em;
  color:#fff;	
  text-align:center;
  margin:0 auto;	
  border-radius:10px;
  transform:translateY(4px);
}

facebookアイコン

続いてfacebookについて見ていきますが、基本的にtwitterの色とアイコンを変えるだけです。

facebook

facebookのカラーコードは『#3B5998』とのことです。

続いてクリックで押せるボタンにしてみましょう。

facebook

[HTML]

<p id="facebook-font"><i class="fab fa-facebook fa-fw"></i>facebook</p>

[CSS]

#facebook-font {
  max-width:300px;
  background-color:#3B5998;
  padding:5px;
  box-shadow:0px 5px 0px -2px #224;
  font-weight:bold;
  font-size:1.8em;
  color:#fff;	
  text-align:center;
  margin:0 auto;	
  border-radius:10px;
}
#facebook-font:active {
  max-width:300px;
  background-color:#3B5998;
  padding:5px;
  box-shadow:0px 2px 0px -1px #224;
  font-weight:bold;
  font-size:1.8em;
  color:#fff;	
  text-align:center;
  margin:0 auto;	
  border-radius:10px;
  transform:translateY(4px);
}

Instagramアイコン

まず最後にInstagramのアイコンを加工していきましょう

Instagramのカラーコードは公式発表が不明でしたのでイメージで作ってみました。

Instagram

グラデーションを掛けるのが面倒になるので、コピペ用にコード貼っておきます。

[HTML]

<i class="fab fa-instagram fa-f3x"></i>

[CSS]

.fa-instagram {
  color:#fff;
  background:radial-gradient(at 20% 120%,orange, #f15a4d 25%, #f13f79 55%, #9933ff 100%) no-repeat;
  border-radius:20%;
}

続いてクリックで押せるボタンにしてみましょう。

Instagram

[HTML]

<p id="instagram-font"><i class="fab fa-instagram fa-fw"></i>Instagram</p>

[CSS]

#instagram-font {
  font-family:'Pacifico', cursive;
  line-height:1.5em;
  max-width:300px;
  background-image:radial-gradient(at 20% 120%,orange, #f15a4d 25%, #f13f79 55%, #9933ff 100%);
  padding:5px;
  box-shadow:0px 5px 0px -2px #224;
  color:#fff;	
  text-align:center;
  margin:0 auto;	
  border-radius:10px;
}

#instagram-font:active {
  font-family:'Pacifico', cursive;
  line-height:1.5em;
  max-width:300px;
  background-image:radial-gradient(at 20% 120%,orange, #f15a4d 25%, #f13f79 55%, #9933ff 100%);
  padding:5px;
  box-shadow:0px 2px 0px -1px #224;
  color:#fff;	
  text-align:center;
  margin:0 auto;	
  border-radius:10px;
  transform:translateY(4px);
}

font-familyプロパティの’Pacifico’はGoogleフォントなのでFont Awesomeと同じようにスタイルシートの読み込みをすれば使用可能になります。別の機会に記事にしてみます。

グラデーションはradial-gradientで『%』位置を指定してあげれば幅に合わせてそれっぽい状態がある程度は維持できます。radial-gradientについてはこちらをご覧ください。

まとめ

Font Awesomeを使えば画像などに頼って作成していたアイコンをより自由に加工できるだけでなく、要素内のコンテンツが検索エンジンにも読み込まれるのでSEO的にもいいことです。

改めて手順の確認ですが、

紹介した<link>タグを<head>～</head>内に貼る
Font Awesomeのサイトでアイコン探す
<i class=”〇〇”></i>をコピーする
貼り付ける
CSSで装飾

何かをダウンロードするといった手間は一切なしで使えるので1～2分ですぐにできます。

今回は紹介していませんがLINEのアイコンもあったりするのでまずは一度使ってみましょう。