便利なWebフォント『Font Awesome』入門編

Font Awesome とは

【Font Awesome】とは、Webサイトで使えるWebアイコンフォントを配布するサービスです。有料版と無料版がありますが、無料版でも千点以上のアイコンが使えます。また、商用利用も可能です。

「見た目はアイコン、中身はフォント!」

アイコンの色やサイズを変える方法はフォントと同じ。しかも、拡大してもボヤけたりしません。

   

通常はFont Awesomeを使うには準備が必要ですが、なんと、テーマCocoonでは準備が完了した状態になっています。記事本文で使ったり、新しいボックスを作成るなどして活用しましょう。

Font Awesomeにはバージョンがあり、使える内容に違いがあります。Cocoonでは、現在Font AwesomeのVer.4とVer.5が使えます。古くからCocoonを利用しているユーザーのためにVer.4が残されているので、これからCocoonを使い始める場合はVer.5に設定しておきましょう。

Cocoon設定全体 →[サイトアイコンフォント]の項目を確認。

また、最新Ver.6に関するCocoon側の見解が出ています。 ≫ Cocoonフォーラム

Font Awesome 基本的な使い方

大まかな手順は次の通りです。

  1. Font Awesomeサイトで利用したいアイコンを探します。
    1. 無料版での利用なら、カテゴリーを「Free」に絞ります。
  2. 使用したいアイコンのコードをコピーします。
  3. 自分のサイトに戻り、アイコンを使いたい場所にコピーしたコードを貼り付けます。

Font Awesome にアクセスすれば、アイコンの検索とコードのコピーは簡単にできるようになっているので、実際にはコピペだけの作業です。

コピーするコードは 次のように記述されています。

<i class=”●●● 〇〇〇”></i>

このコードを、自分のサイト内の必要な場所に貼り付けます。

Font Awesome のアイコンはインライン要素で使うように設計されています。便宜的に<i>タグを使っていますが、<span>を使うこともできます。

WordPressの記事本文で使う時は[カスタムHTML]ボックスを使います。

詳細は後ほど説明します。

まずは<i class="●●● 〇〇〇"></i>の正体ですが、これはHTMLの<i>タグの中にクラスが追加されたもので、「●●●」はアイコンのスタイル、「〇〇〇」はアイコンの名前になっています。

Sample

「家」の形をしたアイコンのコードです。

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

スタイルについて

FontAwesome5には5つのスタイルがあります。

それぞれのスタイルに固有のクラス名が設定されていて、フォントの太さが違います。また、Free版とPro版では使えるスタイルに違いがあります。

StylePrefix(接頭辞)太さFree版Pro版
Solidfas900
Regularfar400×
Lightfal300×
Duotonefad900×
Brandsfab400

このスタイルを理解した上でコピーしたコード見ると、意味が分かりやすくなりますよ。

「fa」は Font Awesome の頭文字です。

Font Awesome 6 ではスタイルが増え、クラスに使うスタイル名を省略しないようになっています。(solid=fa-solid、Regular=fa-regular、Brands=fa-brands、など)

WordPressの記事本文で使う方法

Font Awesome の公式サイトを訪れると、現在はトップにVer.6のアイコンが並んでいます。Ver.5のフォントを使う場合は、検索窓の右横にあるプルダウンメニューからVer.5を選択します。

  1. Font Awesome にアクセスし、使いたいアイコンを探します。
  2. 使いたいアイコンをクリックします。
  3. アイコンを確認し、<i class="●●●"></i> 部分をクリックします。
 クリックと同時にコードがコピーされます。
 自分のサイトに戻ります。
  1. WordPress編集画面に戻り、[カスタムHTML]ブロックを追加します。
  2. 追加された[カスタムHTML]ブロックの中に、コードを貼り付けます。
<p><i class="fas fa-car"></i> おすすめ紅葉ドライブスポット</p>
 段落内に表示されます。
\ 完成 /

おすすめ紅葉ドライブスポット

CSSで使う方法

Font Awesome をCSSで使うと、見出しやリストの前にアイコンを表示できます。

CSSで使う時の決まり

Font Awesome をCSSで使う場合は、font-familyfont-weightを指定する必要があります。

指定する内容はFont Awesome の5つのスタイルごとに定義があるので、それを利用します。

スタイル利用可能プランfont-weightfont-family
SolidFree900Font Awesome 5 Free
Font Awesome 5 Pro(プロユーザー向け)
RegularPro400Font Awesome 5 Pro
LightPro300Font Awesome 5 Pro
DuotonePro900Font Awesome 5 Duotone
BrandsFree400Font Awesome 5 Brands

CSSでFont Awesome5の無料版を使う場合は、次のコードを必ず指定する必要があります。

クラス名{
   font-family: Font Awesome Free 5;
   font-weight: 900;
}

CSSの疑似要素で使う方法

疑似要素の::before::afterで使う場合は、以下の通りになります。

Font Awesome5 の Unicode をコピーする

CSSに使う場合は Unicode(ユニコード)を使います。Font Awesome5 で使いたいアイコンを見つけたら、Unicodeをコピーしてください。

疑似要素が必要な個所に、任意のクラス名を追加する

疑似要素を表示したい要素にクラス名を追加します。

<p class="my-list">Sampleです</p>

クラスにスタイルを指定する

CSSに特殊コードを記述する時は、Unicodeの前にバックスラッシュ\」か、円マーク「\」を記述します。

疑似要素を指定して、テキストの前にアイコンを表示してみましょう。

Sampleです

.my-list::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f152";
	padding-right: 10px; /*内部余白*/
}

疑似要素に色とサイズの指定を追加してみましょう。

Sampleです

.my-list2::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f152";
	color: tomato; /*文字の色*/
	font-size: 1.5em; /*文字のサイズ*/
	padding-right: 10px;
}

タイトルとURLをコピーしました