メニュー 閉じる

アイコンをWordPress の記事で使いたい。[Font Awesome]

Font Awesome はアイコンに特化したフォントです。かなりな量のアイコンがフリーで使えます。

特殊なフォントならインストールしないとダメじゃんと思ったのですが、CDN (コンテンツ・デリバリー・ネットワーク)なのでインストール不要でした。

使い方はとてもシンプルで、対応したタグを貼り付ければ、アイコンが表示される感じですが、WP の場合どうやって使えばいいかイメージできなかったので、いろいろと試してみた事をまとめました。

個人的にはプラグインの一択でした。

アイコンをWordPress の記事で使いたい。
「Font Awesome 5」

Font Awesome 5 の(多分)基本的な使い方。

使いたいアイコンを見つける。

Font Awesome のサイトにて、使いたいアイコンを見つけます。
有料版と、無償版があるので注意。

https://fontawesome.com/

「Icons」をクリック

移動先で「Free」にチェックを入れると、フリーのアイコンのみに絞り込めます。

一覧から使いたいアイコンをクリックすると、クリックしたアイコンの詳細ページに移動します。
このページの左上に、Font Awesome 5 を使うのに必要なコードが書いてあります。

「HTMLで使う」ページにタグを貼り付ければ、アイコンが表示されます。
「CSS で使う」このコードで表示するアイコンを指定します。

とりあえずは「HTMLで使う」方のコードをコピーして、ページに貼り付ければアイコンが表示されます。

WordPress の場合、どうやってタグをHTML 内に記載する?

コピーしたタグをHTML で貼り付けるわけですが、ちょっと悩んだのは、その貼り付ける方法。

ビュジュアルエディターを使っているので、「どうやって?」っていう感じです。


下記のようにHTML を直接書き込めるブロックを使うか、HTML として編集するか。

以下のどの方法でも、WEBにアップした時(プレビューで確認。)では正常にアイコンが表示されましたが、
ビジュアルエディター上ではやや難がありました。

ショートコードを使う。

プレビューがない。

カスタムHTML ブロックを使う。

プレビューはあるが、表示されない。

HTML として編集する。

ビジュアルエディター上で唯一プレビューが表示された(歪んでるけど)。
アイコンの使用方法によると思うけど、ちょっとめんどくさい。

段落に文字を追加 →HTML として編集

※P タグに挟まないと、めんどくさいことになる。

プレビューが表示されないのは残念ですが、今のところ「カスタムHTML」が扱いやすいと思いました。

 ← 小っちゃい^^

サイズを変更

希望のサイズを確認します。(マウスカーソルを合わせるとポップアップします。)
アイコンの詳細ページで確認できます。

アイコン名の後ろに「fa-nx」(※n は倍率)を挿入します。

← 5倍。

プラグインを導入

公式のプラグインがあったので、導入してみる。
公式だし、なんかPro も使えるとか書いてあるし。

インストールして有効化するだけとあるので、インストールして有効化。

設定画面

設定画面。
「Pro」アイコンを使うには、サブスクリプションが要るみたいですね。

バージョンの問題や、他のAwesome プラグインとの競合などを解決する機能も付いている様子。

アイコン挿入機能が便利。

←このボタンからアイコンが挿入できるようになりました。
さすがプラグイン。すごい便利。

矢印のアイコン >「 Font Awesome Icon」をクリックします。

サーチ欄にキーワードを入力して検索。
挿入したいアイコンをクリックします。

コードが挿入されます。

プレビューするとこんな感じです。

サイズ変更(プラグインで挿入の場合)

アイコン名の後ろに「半角スペース」を入れてからサイズ指定を入れます。

通常 →

2倍 fa-2x →

5倍 fa-5x →

10倍 fa-10x →

指定できるサイズについては下記を参照。

https://fontawesome.com/v5.15/how-to-use/on-the-web/styling/sizing-icons

参考サイト

【最新版】Font Awesome 5でアイコンを表示させよう!

Posted in WordPress

関連投稿

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です