周辺知識

Font Awesome5 の使い方

メニューやボタンにちょっとアイコンをつけるだけでも、ずいぶん見栄えは変わりますよね。

アイコンはひと昔前までは自作していたのですが、今は Font Awesome などのサービスを使って手軽るに実装できます。

今回は Font Awsome 5 についてエントリーします。

 

Font Awesome5 について

利用方法

バージョンが5になって、二つの方法で利用できるようになりました。

  • Webフォントとして使う(今までと同じ)
  • SVGとJavaScript で使う

また、有料版(ライセンス料:$60)も用意されていて、有料版では使用できるアイコンの種類やスタイルが増えます。

 

準備

CDNとして利用する以外にもダウンロードして自前のサーバーに置いて利用するやり方もあります。

  • CDNを使う方法(一番簡単な方法)
  • ダウンロードして使う方法

 

演習(基本)

一番簡単で、最も主流である「Webフォントとして使う」&「CDNを使う」やり方で進めます。

 

手順

1)WebフォントとしてCDNを設定
2)アイコンを探す
3)インライン要素でマークアップ

 

1)WebフォントとしてCDNを設定

Font Awesome 5 の「Getting Started」のページでCSSのファイルをCDNで読み込みます。

Getting Started on the Web

表示されているコードをコピーして<head>~</head>内にペーストします。


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>タイトル</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
</head>
:

 

2)アイコンを探す

Font Awsome 5 の「Search icons(アイコンの一覧)」のページで、使用したいアイコンを探して、コードをコピーします。

Font Awesome Search icons

薄いグレーで表示されているアイコンは有料です。

左側のメニューで「スタイルやカテゴリー」「無料版(Free)」「有料版(PRO Only)」などのオプションがあり、クリックすることで対象を絞り込むことができます。

 

3)インライン要素でマークアップ

Font Awesome のアイコンは基本的にインライン要素(<i><span>)でマークアップします。


<i class="fas fa-stroopwafel"></i> <!--  <i> 要素を使った例 -->
<span class="fas fa-stroopwafel"></span> <!-- <span> 要素を使った例 -->

以下のように「大きさ」や「色」は親要素に合わせて自動的に調整されます。


<h3><i class="fab fa-font-awesome"></i> Font Awesome</h3>
<p style="color: orange; font-size: 20px;"><i class="fab fa-firefox"></i> Firefox</p>
<p><i class="fab fa-github"></i> Github</p>

 

演習(応用)

1)疑似要素として使う

疑似要素で使用することもできます。

チェック【 疑似要素とは 】
CSSの ::after::before は、疑似要素と呼ばれるものの一つです。これを使うとHTMLには書かれていない要素もどきをCSSで作ることができます。

HTML には記述せず、CSSの ::before::after を使って content でアイコンの unicode の値を指定して表示します。
content で指定するアイコンの unicode の値は、それぞれのアイコンのページで確認することができます。

HTML


<p class="email"> info@example.com(.email)</p>

 
CSS


.email::before {
  content: "\f0e0";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

 

 

2)アイコンのサイズ変更

クラスを追加することでサイズを変えることができます。

以下のようなクラスが用意されています。

class名 サイズ
fa-xs .75em
fa-sm .875em
fa-lg 1.33em
fa-2x 2em
fa-3x 3em

以下、fa-4x ⇒ 4em … fa-10x ⇒ 10em と続きます。

 
指定例


<p><i class="fab fa-android fa-lg"></i></p>
<p><i class="fab fa-android fa-2x"></i></p>
<p><i class="fab fa-android fa-4x"></i></p>

 

上記以外のサイズにする場合は任意のクラスを作成します。


<p><i class="fab fa-android my_large_icon"></i></p>
<style>
  .my_large_icon {
    font-size: 22px;
  }
</style>

 

3)色の変更

色は親要素に合わせて自動的に調整されますが、CSS で指定することもできます。


<p><i class="fab fa-android icon_green fa-4x"></i></p>
<style>
    .icon_green {
        color: #30a39f;
    }
</style>

 

Font Awsome についての基本的な使い方は以上です。

本庄マサノリ

仕事でLaravelを使っています。気づいたことや新しい発見など情報を発信していきます。メールはこちら

 

-周辺知識