使い勝手抜群！Font Awesome 5の使用方法

スポンサーリンク
Font Awesome
2020.05.20

Font Awesome 5とは

フリーで使用できる、アイコンのサイトです。有料版もありますが、無料版で十分すぎるほどアイコンの種類が豊富です。2018年にFont Awesome 5が発表され、無料で使えるアイコンが2倍の約1500個に増えました。

例えば、こんなアイコンも自分のサイトに表示できてしまいます。

ブランドロゴ　↓

便利な各種アイコン　↓

非常に便利で、簡単に使えるのでおすすめです！使い方を詳しく見ていきましょう。
サイトにアクセスします。↓

Font Awesome
The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.
fontawesome.com

アカウント登録が必要

Font Awesome 5はアカウント登録が必要になります。無料なので、登録してしまいましょう。

「Start for Free」をクリック。↓

メールアドレスが要求されるので、入力し「Send kit Code」をクリック。↓

登録したメールアドレスに、確認のメールが届くので、ユーザー名と任意のパスワードを入力して、登録完了です。

基本的な使用方法

１．Java Scriptファイルを読み込む

ログインすると、「Your Kits」のページにキットが生成されています。キット名は自動で生成され、半角英数字がずらずらと並んでいます。そのまま使用しても良いでしょう。クリックして進みます。↓

<script>コードが表示されているので、コピーしてサイトのHTMLファイルの<head>…</head>内に貼り付けます。↓

コードを貼り付けたら、準備完了です。後はアイコンを選び、表示されたコードをコピーし、HTMLファイルでアイコンを表示したい部分に張り付けるだけです。

アイコンを選ぶ

トップページの「Icons」をクリック。アイコンを選びましょう。2020年5月現在、1588種類あります。迷いますね。サイト内検索を使いましょう。↓

使いたいアイコンを選んだら、「Start Using This Icon」をクリック。↓

コードが表示されるので、コピーしてHTMLファイルに貼り付けます。↓

表示されました！大きさはデフォルトの3倍にしてあります。　↓

アイコンのサイズを変更するには

アイコンのサイズを変えてみましょう。

<i class="fas fa anchor"></i>
<i class="fas fa-anchor fa-2x"></i>
<i class="fas fa-anchor fa-3x"></i>
<i class="fas fa-anchor fa-4x"></i>
<i class="fas fa-anchor fa-5x"></i>

classにfa-2x, fa-3x, fa-4x, fa-5xを追加しただけです。2倍、3倍、4倍、5倍の大きさになります。簡単ですね。

fa-xsを追加すれば0.75倍、fa-smが0.875倍、fa-lgで1.33倍になります。↓

アイコンの色を変更するには

<i>タグに好きな名前を付けて、その名前に対してCSSで色を指定します。「change」という名前を付けて、色を赤に変更してみましょう。

HTML　↓

<i class="fas fa-anchor fa-3x change"></i>

CSS　↓

.change{color:red;
}

色が赤に変わりました。↓

アイコンの左右に余白を追加するには

<i>タグにfa-fwを追加すると、アイコンの左右に余白が生まれます。文字と並べたり、リストとして使用する際に整列させることができます。

fa-fwなし　↓

fa-fw を追加した場合　↓

このようなコードです。↓

<i class="fas fa-edit fa-3x fa-fw"></i>
<i class="fas fa-camera fa-3x fa-fw"></i>
<i class="fas fa-bell fa-3x fa-fw"></i>

アイコンを重ねて表示するには

アイコンを重ねて表示する方法（スタッキング）です。

このような表示が可能です。素敵ですよね。↓

背景が四角の場合

2つのアイコンを重ねたい場合、親要素として<span>タグを記述。”fa-stack fa-lg”というclass指定をします。”fa-lg”は「基準の1.33倍の大きさ」になります。次に背景の四角いアイコン(fas fa-square)に”fa-stack-2x”を指定。中に入れたいアイコンに”fa-stack-1x”の指定をします。背景のアイコンを2倍の大きさ（2x）に指定することで、ちょうど良く重なって見えるのです。中のアイコンの色を反転させたい（白色にしたい）ので、”fa-inverse”の指定をします。

HTMLコードは以下の通り。↓

<span class="fa-stack fa-lg">
  <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-lg">
  <i class="fas fa-square fa-stack-2x"></i>
　<i class="fa fa-instagram fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-lg">
  <i class="fas fa-square fa-stack-2x"></i>
  <i class="fab fa-tripadvisor fa-stack-1x fa-inverse"></i>
  </span>
<span class="fa-stack fa-lg">
  <i class="fas fa-square fa-stack-2x"></i>
  <i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
</span>

背景が四角の白抜きの場合

背景を四角に白抜きにするには、far fa-squareの指定をします。fas(solid)とfar(regular)の違いだけです。中のアイコンの色は反転させないので、”fa-inverse”の指定は要りません。↓

HTMLコードはこちらです。↓

<span class="fa-stack fa-lg">
    <i class="far fa-square fa-stack-2x"></i>
    <i class="fab fa-twitter fa-stack-1x"></i>
</span>
<span class="fa-stack fa-lg">
 <i class="far fa-square fa-stack-2x"></i><i class="fa fa-instagram fa-stack-1x"></i>
</span>
<span class="fa-stack fa-lg">
  <i class="far fa-square fa-stack-2x"></i><i class="fab fa-tripadvisor fa-stack-1x"></i>
  </span>
<span class="fa-stack fa-lg">
  <i class="far fa-square fa-stack-2x"></i><i class="fab fa-facebook-f fa-stack-1x"></i>
</span>

背景が丸の場合

背景を丸にしたい場合は、”fas fa-circle”の指定です。↓

HTMLコードです。↓

<span class="fa-stack fa-lg">
    <i class="fas fa-circle fa-stack-2x"></i>
    <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-lg">
 <i class="fas fa-circle fa-stack-2x"></i><i class="fa fa-instagram fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-lg">
  <i class="fas fa-circle fa-stack-2x"></i><i class="fab fa-tripadvisor fa-stack-1x fa-inverse"></i>
  </span>
<span class="fa-stack fa-lg">
  <i class="fas fa-circle fa-stack-2x"></i><i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
</span>

背景が丸の白抜きの場合

背景を丸の白抜きの場合、”far fa-circle”の指定で、中のアイコンを反転させなければよいので”fa-inverse”の指定を取ればOKです。↓

HTMLコードはこちら。↓

<span class="fa-stack fa-lg">
    <i class="far fa-circle fa-stack-2x"></i>
    <i class="fab fa-twitter fa-stack-1x"></i>
</span>
<span class="fa-stack fa-lg">
 <i class="far fa-circle fa-stack-2x"></i><i class="fa fa-instagram fa-stack-1x"></i>
</span>
<span class="fa-stack fa-lg">
  <i class="far fa-circle fa-stack-2x"></i><i class="fab fa-tripadvisor fa-stack-1x"></i>
  </span>
<span class="fa-stack fa-lg">
  <i class="far fa-circle fa-stack-2x"></i><i class="fab fa-facebook-f fa-stack-1x"></i>
</span>

重ねたアイコンのサイズを変えるには

親要素である<span>タグの指定を変えるだけで、”fa-2x”（2倍の大きさ）”fa-3x”（3倍の大きさ）などにも変更できます。↓

HTMLコードです。↓

<span class="fa-stack fa-2x">
  <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-3x">
  <i class="fas fa-square fa-stack-2x"></i>
  <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>

重ねたアイコンの色を変えるには

親要素である<span>タグに色のclass指定をすれば、色を変えられます。↓

HTMLコードです。style=color:#55acee;を追加するだけですね。

<span class="fa-stack fa-lg" style=color:#55acee;>
  <i class="fas fa-square fa-stack-2x"></i>
  <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>

CSSファイルで記述することもできます。↓

.fa-stack{
color:#55acee;
}

CSSファイルで編集すれば、marginやtext-alignの指定も簡単です。

詳しくは公式サイトにも載っています。↓

Stacking Icons

Font Awesome 5の基本的な使い方を見てきました。オシャレなアイコンが無料で使えるのは嬉しいですよね！どんどん使いましょう。

スポンサーリンク

コメント