注目キーワード

Font AwesomeのアイコンをHTMLとCSSで表示する

Font AwesomeのアイコンをHTMLとCSSで表示する

Font AwesomeはWeb上のアイコンをアイコンフォントという文字として表示することができる商用利用が可能なツールです。

Font Awesomeの無料で使用可能なアイコンだけでも1000種類以上のアイコンが揃えられているので、必ずサイトに表示してみたいと思えるアイコンが見つかるはずです。

Webサイトにアイコンを表示するためには、どのようにFont Awesomeを導入して、HTMLとCSSで表示すればいいのか？覚えておきたいと思います。

 

目次

Font Awesomeのアイコンを使うための導入方法

 

Font AwesomeのアイコンをWebサイトに使用するためには、2種類の導入方法どちらかを使用するのがいいかと思います。

 

  • CDNでFont AwesomeをHTMLに読み込む
  • Font Awesomeをダウンロードして導入する

 

上記の2つの方法は、Font Awesomeでアイコンを表示したいWebサイトに使用しているHTMLファイルの操作や記述を加えて導入する方法です。

この2種類のFont Awesomeを導入する方法のうち、アイコンの表示をするまでの準備が簡単なのは「CDNでFont AwesomeをHTMLに読み込む」やり方です。

Font Awesomeをダウンロードする方法も説明しますが、簡単な方を先に説明します。

 

CDNでFont AwesomeをHTMLに読み込む

 

CDNは、自分のサーバではないところにデータを置いて自分のサイトと同じURLからデータを配信することができます。ファイルを管理しないで済むので手軽です。

Font AwesomeをCDN経由で使う場合には、アイコン表示をしたいWebサイトのHTML構造にある<head></head>の間に、Font Awesomeのスタイルシートを設置します。

 

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css">

 

Font Awesomeのスタイルシートは上記のlink要素を<head>と</head>の間に設置します。

link要素を設置することで、HTMLで読み込んだFont AwesomeのスタイルシートはCDN経由で、Webサイトのページが表示されたときに読み込むことができます。

Advertisement

Font AwesomeをCDNで導入する場合はこれでけで完了です。

link要素で記述してるv5.12.1の部分はFont Awesomeのバージョンです。バージョンが更新されたときは、link要素も更新してあげてください。

 

Font Awesomeをダウンロードして導入する

 

次にFont Awesomeをダウンロードして導入する場合です。はじめにCDNで導入する場合を知ってしまうと、「めんどくせっ…」って思う導入方法です。けど説明します。

 

 

Font Awesome公式トップページを開く

 

まず、Font Awesomeの公式サイトからファイル一式をダウンロードします。Font Awesome公式サイトのトップページを開いて「Download」をクリック。

 

 

そして「Free for Web」をクリックでダウンロード開始。

ダウンロードが終わるとFont Awesomeのファイルがzip形式でPCに入るのでzipファイルを解凍します。

 

 

Font Awesomeでダウンロードして解凍したフォルダの中で、必要なファイルとフォルダは2つです。それが以下です。

 

  • CSSフォルダに入ってる「all.cssファイル」
  • 「webfontsフォルダ」

 

all.cssファイルはFont Awesomeでアイコンを表示するサイトのcssフォルダ内に設置します。

 

 

webfontsフォルダはFont Awesomeでアイコンを表示するサイトのルート直下に配置します。

 

all.cssのファイルとwebfontsフォルダの配置場所は、それぞれFont Awesomeを使用するWebサイトのフォルダ構成で異なるので、適宜でフォルダ構成に合わせたパス指定を行ってください。

 

そして配置したall.cssは、アイコン表示をしたいWebサイトのHTML構造の<head></head>の間に、linkタグで読み込ませます。

 

<link rel="stylesheet" href="../css/all.css">

 

linkタグで読み込ませるときのall.cssファイルまでのパス指定も、それぞれのWebサイトのフォルダ構成に合わせてパスを指定してください。

Font Awesomeをダウンロードして導入する場合は、これで完了です。

 

Font Awesomeのアイコンを表示する使い方

 

WebサイトにFont Awesomeのアイコンを表示する使い方を説明します。

Font Awesomeのアイコンを表示するには2つの方法があります。「HTMLでアイコン表示する」または「CSSでアイコンを表示する」の2種類です。

2種類のアイコンを表示する使い方を一つずつ説明します。

 

HTMLでアイコンを表示する

 

Font AwesomeのアイコンをHTMLで表示する場合は、Font Awesomeの公式サイトでアイコン一覧を開いて、使用したいアイコンのHTMLコードを入手します。

Font Awesomeの公式サイトのトップページに1,557 Free Iconsのリンクがあるので開きます。(数字1,557はフリーアイコン数のため変動するはずです)

 

 

リンクで開いた画面はFree Iconsからアイコン一覧ページを開いているので、Font Awesomeの無料アイコンだけの種類からFreeで選べます。

例えばHTML5のアイコンをHTMLで表示するとしたら、HTML5のアイコンをクリックします。

 

 

開いた画面の左上のあたりに「<i class」から始まるi要素が表示されているのでコピーします。

 

 

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

 

そしてコピーしたHTMLコードをFont Awesomeを導入したサイトのHTMLページでアイコン表示したい要素に貼り付けます。

 

 

貼り付けた要素でアイコンの表示を確認するとFont Awesomeでコピーしたi要素のアイコンが表示できているのが確認できます。

 

CSSでアイコンを表示する

 

Font AwesomeのアイコンをCSSで表示する場合は、擬似要素のbeforeかafterで表示したいアイコンの指定をします。

 

<div class="font-icon">
　<p>CSSでアイコン表示</p>
</div>

 

まずFont AwesomeのアイコンをCSSで適用できるHTML要素を作成しておきます。

そして作成したHTML要素に例えば右ダブル矢印のangle-double-rightというアイコンをCSSのbeforeで要素前に表示する場合

 

.font-icon p::before{
　font-family: "Font Awesome 5 Free";
　content: '\f101';
　font-weight: 900;
}

 

font-familyプロパティで”Font Awesome 5 Free”;を指定します。この指定は、表示するアイコンがFont Awesomeのバージョン5のFreeアイコンなことを示します。

Font Awesome 4 までは、font-family は「FontAwesome」と指定するだけでしたが、 Font Awesome 5 からはアイコンのスタイル（種類）により指定する値が「Font Awesome 5 Free」や「Font Awesome 5 Brands」のようにバージョン番号や種類を指定する必要があります。

Advertisement

contentプロパティにはCSSで表示するFont Awesomeのアイコン値を「Unicode」で指定します。

 

 

Font AwesomeのUnicodeの調べ方は、表示したいアイコンをFont Awesome公式のアイコン一覧で選んだ画面の左上にあります。Unicodeにマウスを当てるとUnicode copyができます。

またコピーしたUnicodeをCSSのbeforeかafterで指定するときには、Unicodeの先頭にバックスラッシュの指定をすることも忘れないようにします。

 

そしてfont-weightの指定も必要です。

 

 

Font Awesomeのアイコンの種類には、それぞれアイコンスタイルが決まっていて、アイコンスタイルに合わせたサイズをCSSのfont-weightプロパティで指定する必要があるからです。

CSSでFont Awesomeのアイコンを指定して表示確認したけど□のように四角表示になってうまく表示できない場合は、アイコンスタイルのサイズとfont-weightで指定したサイズが会ってない可能性があります。

以下を参考に表示したいアイコンスタイルとサイズを確認して適用してみてください。

 

SOLID通常アイコン、白抜きのもの900fas
REGULARアウトラインをとったようなもの400far
LIGHT線が細いもの300fal
BRANDSTwitterなどのブランドロゴ400fab

 

アイコンの表示をHTMLとCSSでカスタマイズ

 

HTMLで表示したFont Awesomeのアイコンのi要素に記述を追加してカスタマイズしたり、CSSで表示したFont Awesomeのアイコンは、CSSのプロパティを追加指定してカスタマイズすることができます。

 

HTMLでカスタマイズできること

 

HTML側でFont Awesomeの「アイコンのサイズ」をカスタマイズできます。

 

See the Pen
ZEGrVPO by @shu (@-shu-)
on CodePen.

 

code penで表示確認できます。スマホ閲覧の方は「Result」タップで表示できます。

 

<i class="fas fa-biking fa-10x"></i>

 

Font Awesomeのアイコンのi要素の開始タグでfa-10xを記述すると、10emのアイコンサイズにカスタマイズ。

他のサイズにカスタマイズすることもできます。以下を参考にしてください。

 

fa-xs.75em
fa-sm.875em
fa-lg1.33em
fa-2x2em
fa-3x3em
fa-4x4em
fa-5x5em
fa-6x6em
fa-7x7em
fa-8x8em
fa-9x9em
fa-10x10em

 

1つ以上のFont Awesomeの「アイコンを同じ固定幅」にカスタマイズすることもHTMLだけで可能です。

 

See the Pen
yLNvZea by @shu (@-shu-)
on CodePen.

 

上のcode penで左が「バラバラな幅」で、右が「固定幅に直した幅」のアイコン表示が比べられます。固定幅がわかりやすいようにアイコンの背景をCSSで適用しています。

 

<i class="fas fa-skating fa-fw" style="background:SkyBlue"></i>

 

アイコンを固定幅にする場合は、Font Awesomeのアイコンのi要素の開始タグにfa-fwを記述して追加します。

 

HTMLでアイコンの「アニメーション化」するカスタマイズも可能です。

 

See the Pen
XWbZoZK by @shu (@-shu-)
on CodePen.

 

<i class="fas fa-sync fa-spin"></i>
<i class="fas fa-spinner fa-pulse"></i>

 

Font AwesomeのアイコンをHTMLで回転させるならi要素の開始タグにfa-spinを追加記述。

脈拍みたく回転するようにカスタマイズするならfa-pulseをi要素に追加です。

また回転させたアニメーションのぐらつきはCSSのdisplay:blockでけっこう解決できるようです。

 

HTMLでアイコンの周りで「テキストの折り返し」をするような場合のカスタマイズ。引用符のアイコンを例にします。

 

See the Pen
YzXeBxg by @shu (@-shu-)
on CodePen.

 

code penの表示で上のピンク背景が、Font Awesomeのアイコンの周りに折り返しをさせた表示で、ブルー背景の表示が何もしてない状態です。

 

<i class="fas fa-quote-left fa-2x fa-pull-left"></i>

 

fa-pull-leftで左、fa-pull-rightで右にアイコン位置を決めて、HTMLでアイコン表示するFont Awesomeのi要素の開始タグに記述します。

アイコンの下に余白ができたくらいしか私には違いがわかりませんでした。

 

CSSでカスタマイズできること

 

Font AwesomeのアイコンをHTMLではなくCSSで表示した場合は、擬似要素のbeforeかafterで適用したアイコンの色をcolorプロパティで、アイコンサイズならfont-sizeプロパティでカスタマイズできます。

 

.font-icon p::before{
　font-family: "Font Awesome 5 Free";
　content: '\f236';
　font-weight: 900;
　padding-right: 25px;
　color: deeppink;
　font-size: 100px;
}

 

CSSを使い慣れている方の場合はHTMLでカスタマイズするのではなく、CSSでやってしまうのが細かい指定ができるので楽かと思います。

せっかくFont Awesomeのアイコンをサイトに表示できるようになったので、以前アコーディオンメニュー作成したメニューボタンに、Font AwesomeアイコンをCSSで表示して、この投稿を終わりたいと思います。

 

.menu-wrap label::before{
　display: inline-block;
　content: '>>';
　color: red;
　padding-right: 10px;
}
.menu-wrap label::after{
　display: inline-block;
　content: '<<';
　color: red;
　padding-left: 10px;
}

 

もともとは、上のCSSで指定した矢印記号でした。

 

.menu-wrap label::before{
　display: inline-block;
　font-family: "Font Awesome 5 Free";
　content: '\f101';
　color: red;
　padding-right: 10px;
}
.menu-wrap label::after{
　display: inline-block;
　font-family: "Font Awesome 5 Free";
　content: '\f100';
　color: red;
　padding-left: 10px;
}

 

Font Awesomeのアイコンで同じような矢印アイコンを使います。CSSのbeforeとafterのプロパティにfont-familyを加えて、contentの値をFont AwesomeのアイコンUnicodeに変更。

 

 

カスタマイズ後は、同じ矢印でもFont Awesomeのアイコンで表示すると、少し柔らかい印象の矢印を表示できました。

夢中で描いてたら長い投稿になってしまったのでこのくらいにします。

 

まとめ

 

Font AwesomeをWebサイトに導入して、HTMLでもCSSでもアイコンを表示する投稿内容でしたが、Font Awesomeの導入はCDNがおすすめ。アイコン表示はHTMLとCSSのどちらでも表示できるように覚えておくと便利ですね。

今回Font Awesomeのアイコンカスタマイズで使用したcode penでもCDNでheadに読み込めばアイコン使えるので、さっとアイコン付きのデザインを試すときに便利でした。

HTMLカテゴリの最新記事