WEBサイト制作

アイコンフォント『Font Awesome』の登録方法と使い方をざっくり紹介

イメージ

ウェブサイト上でアイコンを簡単に表示させることができるアイコンフォントを提供する『Font Awesome』について簡単にご紹介します。

『Font Awesome』はホントに便利です。アイコンをわざわざ作らなくても、コードを書くだけで、さまざまなアイコンをサイト上に表示することができます。アイコンには無料版と有料版がありますが、無料版でも1500種類以上が用意されています。きっと役立つアイコンが見つかると思います。

Font Awesome に登録する

Font Awesome』のサイトにアクセスし、無料のユーザー登録を行います。

以前は登録不要でしたが、登録制となりました。

fontawesomeの登録

「Start for Free」をクリックします。「Get More with Pro」は有料版です。

有料版は何が違う?
使えるアイコンの数が増えます。7000種類以上に。アイコンには、デザインは同じで線の太さだけが違うものがあります。無料版だと選べる線の太さはひとつのみだったりしますが、有料版だと複数の線の太さを選ぶことができます。

fontawesomeの登録画面

メールアドレスを入力して「Send Kit Code」をクリックします。
クリックすると、記入したメールアドレス宛に確認のメールが送られます。

fontawesomeの承認画面

送られてきたメールの「Click to Confirm Your Email Address + Set Things Up」をクリックします。

fontawesome ログイン情報入力

ログインパスワードを入力し「Set Password & Continue」をクリックします。これで登録は終了です。

Kitコードを<head>内に貼り付ける

ユーザー登録をするとユーザー固有の番号(英数字)が作られます。赤枠内の英数字がそれです。

fontawesomeのコード

この数字が入ったタグを、自身のサイトの<head>~</head>内に貼り付けます。上記画面の水色ボタン「Copy Kit Code」をクリックすればコードをコピーできます。

<head>~</head>内に埋め込むとこのような感じです。

<html>
  <head>
    <script src="https://kit.fontawesome.com/自身の番号.js" crossorigin="anonymous"></script>
  </head>
  <body>
    <!-- サイトのコンテンツ -->
  </body>
</html>

これで事前準備は終了です。

アイコンを探す

アイコンのギャラリーページから、使いたいアイコンを検索します。
無料で使えるアイコンは濃いグレーで、有料版のアイコンは薄いグレーで表示されます。

fontawesomeのアイコンの検索

キーワードを入れて検索してみましょう。日本語だと検索できないので、英語で入れます。

左側のメニューを活用するとアイコン探しがラクになるかもしれません。「Free」にチェックを入れると無料で使えるアイコンだけが表示されます。さらにアイコンのカテゴリ名をクリックすると、表示を絞ることができます。

アイコンのコードを<body>内に貼り付ける

使いたいアイコンをクリックすると、次のような詳細画面が表示されます。

fontawesomeのアイコン

アイコンを表示させるためのコードは、ページ上部で取得します。

fontawesomeのアイコンのコード

<i class="~"></i>の箇所をクリックするとコードがコピーされます。このコードを、サイトの<body>~</body>内の表示したい箇所に貼り付けます。これだけでアイコンが表示されます。

HTMLをこのように書くと、

<p><i class="far fa-thumbs-up"></i>いいね!</p>

画面上ではこのように表示されます。

いいね!

アイコンの色を変更する

テキストの色を変更する要領で、CSSを使ってアイコンの色を変更できます。

クラス「fa-thumbs-up」に対して色を指定することもできますが、今回は<p>にクラスを追加し、色を付けてみます。

<p class="pink"><i class="far fa-thumbs-up"></i>いいね!</p>
.pink {
  color: #f582ae;
}

画面上ではこのように色が変わります。

いいね!

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

「fa-2x」「fa-3x」など、サイズを変えることができるクラスが予め用意されています。

HTMLをこのように書くと、

<i class="fas fa-camera fa-xs"></i>
<i class="fas fa-camera fa-sm"></i>
<i class="fas fa-camera fa-lg"></i>
<i class="fas fa-camera fa-2x"></i>
<i class="fas fa-camera fa-3x"></i>
<i class="fas fa-camera fa-5x"></i>
<i class="fas fa-camera fa-7x"></i>
<i class="fas fa-camera fa-10x"></i>

画面上ではこのように表示されます。

テキストの色変えと同様で、CSSを使って自分の好きなようにアイコンのサイズを指定(変更)することも可能です。

<p><i class="fas fa-camera"></i>カメラ</p>
.fa-camera {
  font-size: 30px;
}

カメラのアイコン箇所だけサイズを30pxに指定しています。
画面上ではこのようになります。

カメラ

CSSだけでアイコンを表示させる

HTMLに<i class="~"></i>を書くのではなく、CSSの疑似要素を使ってアイコンを表示させることもできます。

<p class="relax">ひとやすみ</p>
.relax::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: '\f0f4';
}

「content:」に入れる値は以下でコピーします。値の前にバックスラッシュ・円マークを忘れずに入れます。

fontawesomeのアイコンのコード

「font-weight:」の値は、アイコンの種類が
「SOLID」のときは「font-weight: 900;」を、
「REGULAR」のときは「font-weight: 400;」を指定します。

画面上ではこのようになります。

ひとやすみ

まとめ

『Font Awesome』の使い方についてご紹介しました。アイコンが入ると、サイトが華やかになったり、何より分かりやすくなったりします。アイコンを作るのはちょっと技術がいります。そんなときは、アイコンフォント『Font Awesome』を活用してみはいかがでしょうか?

Share

ブログランキング

記事が参考になったら応援クリックしていただけると励みになります。


にほんブログ村 IT技術ブログ WordPressへ