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

2022.08.19

無料で使えるWebフォントサービスの Font Awesome は、サイト運営をする上でとっても便利なアイテムです。テーマCocoonを使っていれば、簡単にサイト内で使用できるので、活用していきましょう。

＼ 【意外と知らないIT用語】ドメインって何？ お名前.com ／

Font Awesome とは

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

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

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

　 　

Font Awesomeを使うには、通常は前もって準備が必要ですが、なんと、テーマCocoonでは面倒な準備は必要ありません。

記事本文で使ったり、メニューやボタンで使ったりして活用できます。

Font Awesomeにはバージョンがあり、使える内容に違いがあります。

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

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

現在の最新バージョンは Ver.6 ですが、こちらに関してはCocoon公式で見解が出ていますので、そちらをご確認ください。　≫ Cocoonフォーラム

Font Awesome 基本的な使い方

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

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

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

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

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

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

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

WordPressの記事内で使う時は［カスタムHTML］ボックスを使います。

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

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

Sample

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

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

FontAwesome のスタイル

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

それぞれのスタイルに固有のクラス名が設定されていて、フォントの太さが違います。

Free版とPro版では使えるスタイルに違いがあります。

StylePrefix（接頭辞）太さFree版Pro版
Solidfas900〇〇
Regularfar400×〇
Lightfal300×〇
Duotonefad900×〇
Brandsfab400〇〇

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

「fas」は、
「fa」は Font Awesome の、

「s」は Solid 頭文字だとわかりますね。

Font Awesome 6 ではスタイルが増え、スタイルの記述方法も変わっています。

WordPressの記事本文で使う方法

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

手順

Font Awesome にアクセスし、使いたいアイコンを探します。
使いたいアイコンをクリックします。

アイコンをクリックすると、詳細画面が表示されます。

アイコンを確認し、<i class="●●●"></i>　部分をクリックします。

自分のサイトに戻ります。

WordPress編集画面に戻り、［カスタムHTML］ブロックを追加します。
［カスタムHTML］ブロックの中に、コードを貼り付けます。

テキストとテキストの間にコピーしたコードを貼り付けると、アイコンを配置することができます。

<i class="fas fa-car"></i> おすすめ紅葉ドライブスポット
ツールオプションの中から［ブロックへ変換］を選択します。
  • pやdivなどのブロックレベル要素で囲んでおかないと、Webフォントの表示が乱れるので注意が必要です。
  • ブロックに変換すると、自動的にpタグで囲ってくれます。タグの知識がある場合は直接タグを記述してもOKです。
　段落内に表示されます。
＼ 完成 ／

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

＼ Font Awesome 5 Free アイコンを探す ／

CSSで使う方法

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

CSSで使う時の決まり

Font Awesome をCSSで使う場合は、font-familyとfont-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で使う場合は、以下の通りになります。

CSSの疑似要素で使う方法

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

最後に…

こちらの記事では、FontAwesomeの基本的な使い方をまとめました。

さらにスタイルを設定する方法は、FontAwesom応用編 にまとめています。

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