ウェブマスターがウェブのことを書いたら

ウェブマスターとして働いている管理人がウェブで躓いたこと、ググったことを備忘録として書いています。主に技術的なこと、WEBサイト設計のこと

フリーのアイコンwebフォント『Font Awesome』の使い方

      2022/12/14

 - HTML CSS

500以上のアイコンが無料で使えるwebフォント『Font Awesome』の基本的な使い方、Tips。このFont Awesomeはアイコンを画像ではなく文字（フォント）として使えるのでアイコンを１つづつ作らなくても簡単にサイトにアイコンを表示することができます。

Font Awesome公式ページ-利用できるアイコン一覧

使い方は２通り

使い方は、ページのヘッダでファイルを公式ページ（CDNサーバ上）からインクルードして使う方法（CDN）と、必要なファイルをダウンロードしてサーバーにアップロードして使う方法の２種類あります。

簡単なのはCDNで利用する方法ですが、こちらの場合だと外部からファイルを読み込むのでアイコンの表示が若干遅れることがあります。ページの表示速度を重要視する場合や、サイトの運用メンテナンスのしやすさを考慮する場合はファイルをダウンロードして使う方法がおすすめです。

個人ブログの場合や、HTML、CSSにあまり詳しくない場合はCDNの方法でいいと思います。

ファイルの読み込み

方法１：CDNで利用する場合

webフォントを使いたいページの、HTMLソースのhead要素内に、以下のlink要素を記述します。

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

上記で読み込んでいるファイルのURLの/4.5.0/の部分はバージョンの番号になっているので、バージョンが変更された場合はこの数字を変更するだけでいけます。

方法２：ファイルをダウンロードして利用する場合

↓Font Awesomeの公式ページでファイルをダウンロードします。
Font Awesome公式ページ
Awesomeダウンロード01
Awesomeダウンロード02
zipファイルをダウンロードできますので、解凍して必要なファイルをサーバーにアップロードします。

必要最小限のファイル

「CSS」フォルダ内のfont-awesome.min.css
「fonts」フォルダのすべて
Awesomeファイル

このサイトの場合は、themesフォルダの中にアップロードしましたので、以下の場所に設置しています。
https://tuono034s.com/wp-content/themes/stinger5ver20150505/font-awesome-4.5.0/{ここにcssとfontのフォルダ}

あとは、方法１と同様にwebフォントを使いたいページの、HTMLソースのhead要素内でCSSを読み込みます。(↓このサイトの場合)

<link rel="stylesheet" href="https://tuono034s.com/wp-content/themes/stinger5ver20150505/font-awesome-4.5.0/css/font-awesome.min.css">

以上で設置準備は完了です。

アイコンの表示方法　iタグ

アイコンを表示する方法はCSSで自由にできるのですが、まずは公式サイトで紹介している一番簡単な方法を紹介します。

公式サイトのソースコードをコピペして使う

公式サイトのアイコン一覧ページから使用したいアイコンをクリックして、ソースコードをコピペして使います。

例えば、 ←のアイコンを表示したい場合

アイコン一覧からアイコンのページへ行き、表示しているソースコード↓をコピーして、サイトにはり付けて使用します。

<i class="fa fa-check-square"></i>

アイコンのサイズを大きくしたい場合

fa-lg
fa-2x
fa-3x
fa-4x
fa-5x
サイズを大きくしたい場合はiタグに大きさを指定するclassを付与します。

<i class="fa fa-check-square fa-lg"></i>
<i class="fa fa-check-square fa-2x"></i>
<i class="fa fa-check-square fa-3x"></i>
<i class="fa fa-check-square fa-4x"></i>
<i class="fa fa-check-square fa-5x"></i>

アイコンの表示方法　:before指定

疑似要素の「:before」でアイコンを表示させる方法もご紹介します。公式サイトで紹介されている方法だとiタグを使うのでソースコードを編集しないといけない場合がありますが、こちらの場合だとCSSに記述することで表示させることができます。

表示例
  • リスト1
  • リスト2
  • リスト3
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
CSSの記述内容
li:before {
    content: "\f14a";
    font-family: FontAwesome;
    margin-right: 8px;
}

contentにはアイコンのページで記載されている[Unicode]を記述します。font-familyで「FontAwesome」を指定します。色やサイズはCSSで指定すると調整できます。
unicodeを指定