匿名でメッセージを送れる「マシュマロ」を設置しました。

【WordPress】Webアイコン(Font Awesome)をブログの文章中に入れる方法

ブログ技術
【PR】本記事のリンクには広告が含まれています。

WordPress(Cocoon)でブログをやっていると、記事内に絵文字のようなアイコンを入れたいときがあります。

Font Awesome(商用利用可能、無料)を用いることで、このようなWebアイコン( )をブログ内に挿入することができます。

そこで今回は、Font Awesomeを用いて記事中にWebアイコンの挿入する方法をご紹介します。

この記事の内容
  • Font Awesomeについて
  • Webアイコンの挿入方法
  • アイコンの色の変え方
スポンサーリンク

実施環境

■WordPress環境

  • WordPressバージョン:6.2.2
  • PHPバージョン:7.4.33

■Cocoon環境

  • テーマ名:Cocoon
    • バージョン:2.6.3.4
  • 子テーマ名:Cocoon Child
    • バージョン:1.1.3

■Font Awesome

  • バージョン:5.15.4
  • サイトはこちらから。

WordPress、Cocoon環境情報は、以下の記事に書かれている方法で簡単に調べることができます。
不具合報告の際に添えていただけると嬉しい環境情報の取得方法 | Cocoon

Font Awesomeとは

Font Awesome(フォント オウサム)とは、Webサイト上でアイコンを表示させるためのサービスの一種です。

Font Awesomeを利用することで、あらかじめ用意されたアイコンを簡単に配置できたり、大きさや色を指定することもできます。

また、Font Awesomeは商用利用が可能であり、基本的に無料で利用できます。

Font Awesomeは、Webアイコンフォントと呼ばれる仕組みの一種です。

Webアイコンフォントとは、Webサーバに置かれたアイコンをサイト側で指定することで、Webサイトに表示できる仕組みのことです。

この仕組みにより、Webサイトを閲覧する端末の環境に左右されることなく、指定されたアイコンをきちんとWebサイトに表示できます。

また、Webアイコンフォントは画像ではなく「フォント」であるため、CSSによって大きさや色を指定することができます。

以下は、Webアイコンフォントではなく、モリサワの「Webフォント」についての解説記事ですが、勉強になったのでご紹介させていただきます。

Webフォントとは? | ブログ - Morisawa DTP Lab.
カテゴリ:文字・組版

Webアイコンの挿入方法

ブログの文章中にWebアイコン(Webアイコンフォント)を挿入する流れは、以下のようになります。

Webアイコン挿入の流れ
  • Step 1
    Cocoon設定を行う

  • Step 2
    Font AwesomeのサイトからWebアイコンを選ぶ
  • Step 3
    ブログの文章中に挿入する

挿入の仕方については、主にこちらの記事を参考にさせていただきました。

Cocoon設定を行う

まず、Cocoonの設定を確認します。

WordPressのダッシュボードを開き、「Cocoon設定」を選択します。

そして、Cocoon設定の「全体」タブを選択します。

WordPressのCocoon設定の画面

全体設定のページを下にスクロールすると、「サイトアイコンフォント」という項目が出てきます。

デフォルトでは「Font Awesome 4」となっていますが、Cocoon 2.0.0からは「Font Awesome 5」が利用できるので、「Font Awesome 5」に変更します。

サイトアイコンフォントを「Font Awesome 5」に変更する

Font Awesome 5に切り替えることができたら、ページの一番下までスクロールして「変更をまとめて保存」をクリックします。

一番下までスクロールして「変更をまとめて保存」をクリック

保存ができたら、Cocoon設定は完了です。

Font AwesomeのサイトからWebアイコンを選ぶ

まず、Font Awesomeのサイトにアクセスします。

ちなみに上のリンクは、バージョンが「5.15.4」、「無料」版のアイコンが表示されるようになっています(以下の赤で囲んだ部分でバージョン等の切り替えが可能)。

Font Awesomeのサイト

検索窓に使いたいアイコンを英語で入力します。今回は「train」と入力しました。

すると「train」にヒットしたアイコンが表示されるので、その中から選んでクリックします。

すると、このような画面が出てくるので、表示されたHTMLのコードをコピーします。

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

以上で、Font Awesomeのサイトから、使いたいアイコンを選ぶことができました。

ブログの文章中に挿入する

コピーしたFont Awesomeのアイコンフォントを、ブログの文章中に挿入します。

挿入にはいろんな方法がありますが、ここでは一番簡単にできる(実際に私がやっている)方法をご紹介します。

今回は、電車アイコン(train)を以下のように使いたい場合について説明します。

JR奥羽本線・青森行
秋田→青森(3時間20分 185.8km)

上の例は、実際にこちらの記事で交通情報を説明するのに使用しました。

まず、先に文章を入力して、アイコンを挿入したい場所にカーソルを移動させます。

そして、表示されたメニューの右端にある「下を向いた”く”の字」をクリックします。

すると、「HTML挿入」という項目があるので、それをクリックします。

下のようなポップアップが表示されるので、そこにコピーしたアイコンのHTMLコードを貼り付けて、OKを押します。

すると、下のように「html」ではさまれたHTMLコードが挿入されました。

この記事を下書き保存してプレビューすると、下のよう表示されます。

JR奥羽本線・青森行
秋田→青森(3時間20分 185.8km)

挿入する位置やアイコンの種類を変えると、以下のような表示も可能です。

  • ダウンロードとか。
  • リンク とかも。
  • 文末にも置けます

このように、文中にコピーしたコードをHTML挿入することで、アイコンを挿入することができました。

おまけ アイコンの色の変え方

おまけ編として、挿入したアイコンフォントの色を変える方法をご紹介します。

例を示すと、上の方法で挿入したアイコンは ←このように黒色になってしまいますが、色を指定することで、 のような色を付けることができます。

色の指定は、コピーしたアイコンのHTMLコードに、以下のようなstyle属性(style=”color:Blue”の部分)を追加します。

<i class="fas fa-train" style="color:Blue"></i>

今回の「Blue」という色は、こちらのカラーコード一覧にある「Color name」から選んで指定しました。

以上、Font Awesomeを利用することで、ブログの文章中にアイコンを挿入することができました。