(確認事項)このMASAa.netには【広告】【PR記事】が掲載されています。MASAa.netご利用の方はプライバシーポリシーをご確認下さい。
WordPress関連ブログ関連サービス

Webアイコンフォント Font Awesomeを使う!

アイキャッチ画像 Font Awesome
この記事は約4分で読めます。

【広告】

※ 記事内には【広告】が含まれています

WordPressテーマ THE THOR

別ブログのZMASAa.blogは、WordPressテーマ THE THOR(ザ・トール)を使って構築しています。

ZMASAa.blog│ガジェット好きのmasaaが情報発信する2nd WordPressブログサイト
ガジェット好きのmasaaが情報発信する2nd WordPressブログサイト

今回は、WordPressテーマ THE THOR(ザ・トール)で、Font Awesomeの利用についてまとめてみました。

Font Awesomeとは?

Font Awesomeとは、無料または有料で使えるWebアイコンフォントのサービスです。

現在の最新バージョンは「Font Awesome 5」となっています。

「Font Awesome 5」では、1,500種類以上のWebアイコンフォントが用意されており無料で使用することができます。

また、有料の「Proプラン」が用意されており、5,000種類以上のWebアイコンフォントを使用することができます。

有料の「Proプラン」は年間60ドルで利用することが可能です。

取りあえず無料で使えるプランで十分でしょう。

Font Awesome 5を設定する

「Font Awesome 5」を使うには、

  • CSSで読み込む
  • JavaScriptで読み込む

の2種類があります。

今回は、CSSで読み込む方法を説明したいと思います。

Font Awesome
The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.

のページを開き「Start Using Free」をクリックします。

Webアイコンフォント Font Awesomeを使う!

そのページ内の記載されているコードをコピーします。

Webアイコンフォント Font Awesomeを使う!

次にサーバーにアップしているthe-thor-childフォルダのheader.phpを開きます。

そのheader.phpを開き、headタグ内に先ほどコピーしたコードを貼り付ければOKです。

これで「Font Awesome 5」を使える準備ができました。

なお、「Font Awesome 5」はWebアイコンフォントが新しく追加されるとバージョンが上がるので、時々チェックしてバージョンアップされていれば書き換えるようにしましょう。

今回のバージョンは、「v5.8.1」となります。

Webアイコンフォントを表示する

次は実際にWebアイコンフォントを自分のブログに表示させてみます。

Font Awesome
The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.

のページを開き、「1,513 Free Icons」をクリックします。

Webアイコンフォント Font Awesomeを使う!

無料で使える1,513種類のWebアイコンフォントが表示されるので、この中から自分が表示させたいWebアイコンフォントを選びます。

Webアイコンフォント Font Awesomeを使う!

今回はアマゾンのアイコンである「amazon」のWebアイコンフォントを選択してみました。

Webアイコンフォント Font Awesomeを使う!

Webアイコンフォントを選択すると、選択したWebアイコンフォントの詳細ページが表示されます。

Webアイコンフォント Font Awesomeを使う!

このページの「<i class="fab fa-amazon"></i>」をクリックすることで、コードがコピーされます。

(※選択したWebアイコンフォントによって、コード内容が変わります。)

Webアイコンフォント Font Awesomeを使う!

コピーしたコードをHTMLの箇所に貼り付けることで、Webアイコンフォントが表示されます。

なお、Webアイコンフォントのカラーを変更したい場合は、

<i class="fas fa-award" style="color:yellow;"></i>

の様に色の指定を行います。

例えばメニュー項目に、Webアイコンフォントを表示させたい場合は次の様な設定になります(ホームのアイコンを表示させた場合)。

Webアイコンフォント Font Awesomeを使う!

最後に

今回簡単にWordPressテーマ THE THOR(ザ・トール)で、Webアイコンフォント「Font Awesome 5」の利用についてまとめてみました。

WordPressテーマ THE THOR(ザ・トール)としていますが、多くのテーマで利用することができるでしょう。

1,500種類以上のWebアイコンフォントが無料で使えるので、このWebアイコンフォントをメニューや項目の先頭に表示させてブログをより一層見やすくさせると良いでしょう!

WordPressテーマ Cocoonの場合

WordPressテーマ Cocoonには、Webアイコンフォント「Font Awesome 4」が最初から導入されており、特に設定する必要無く(header.htmlを修正する必要無し)利用することが可能です。

注意する点は最新のWebアイコンフォント「Font Awesome 5」ではなく、その旧バージョンであるWebアイコンフォント「Font Awesome 4」と言うことです。

なお、Webアイコンフォント「Font Awesome 5」とWebアイコンフォント「Font Awesome 4」は同時に使用することができません。

Webアイコンフォント「Font Awesome 4」は下記のサイトページから選ぶことができます。

Font Awesome Icons
Font Awesome, the iconic font and CSS framework

設定方法は上記の「Webアイコンフォントを表示する」と同じやり方となります。

MASAa.netをご覧頂きありがとうございます!
もしMASAa.netの記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

【広告】おすすめWordPressテーマ!
WordPressテーマ THE THOR(ザ・トール)
WordPressテーマ Diver
WordPressテーマ WING(AFFINGER6)

※ 記事内には【広告】が含まれています
MASAa.net

コメント

【広告】