MENU

Font Awesomeの使い方

「フォントアイコン」の使い方について。

個人的に衝撃的だったフォントアイコン。
テキストの大きさと相対性を保てるなんて、まさに昔、私が追い求めていた理想そのものです。

今回はアイコンフォントを本文中に利用する例を紹介します。
自分の備忘録も兼ねてます。

利用しているテーマはcocoon。
利用するフォントアイコンはFont Awesomeです。

例:なんと本日は雪が降りました 

このように、文章と一緒に表示させることが可能です。

SWELLを利用している方は設定でアイコンフォントを読み込ませておくか、利用したいページの「カスタムCSS & JS」のCSSに以下を記述しておく必要があります。

@import url("https://use.fontawesome.com/releases/v5.8.1/css/all.css");

Font Awesomeは有料・無料があり、無料であっても会員登録など面倒な手続きは不要です。
また、無料でも約1600個ほどのアイコンを利用できます。

バージョンもあるようですが、2022/7/13時点でcocoonが対応しているFont Awesome5を利用します。

まずはFont Awesomeのサイトへ行き、使いたいアイコンを探します。
※Freeにチェックが入っているか要確認

検索することも可能ですが、日本語対応はしていません。
例えば「本」なら「book」と検索しましょう。

使いたいアイコンをクリックすると、コードが出てきます。
これをコピーします。

例えば家のマーク。

<i class="fas fa-home"></i>

これをHTMLにそのまま張り付けるだけです。

ブロックエディターを利用している方は「HTMLとして編集」を選択してソースを表示させ、使いたい文中にコピーしてきたコードを張り付けましょう。

例えば見出しで利用したい場合は以下のようになります。

<h2><i class="fas fa-balance-scale"></i> ここに見出し</h2>
目次

 ここに見出し

どうでしょうか。
</i>の後に1文字スペースを入れるのがコツです。

HTML編集からビジュアル編集に戻ったあとにそのブロックを編集すると、アイコンが壊れてしまいます。
そのため、アイコンフォントは一番最後の完成時に入れるようにしましょう。

広告

目次