1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

WordpressのCocoonにFont Awesome6のアイコンを使いたい

Posted at

こんにちは
株式会社クラスアクト インフラストラクチャ事業部の大塚です。

これはWordpressのCocoonテーマにFont Awesome6のアイコンを適用するためのメモです。
CocoonはFont Awesome5までは公式で対応しているのですが6は対応していないので、プラグインを導入しないと使用出来ないっぽいです

Font Awesomeとは?

Wikipediaには以下の記載あり。
LESSとは"Leaner Style Sheets"の略で、CSSの拡張のために使われる言語らしいですね。
知りませんでした。

Font Awesomeとは、CSSとLESSをベースとしたフォントとアイコンのツールキットである。

公式サイトは以下

Font Awesomeのバージョン5までであれば、Cocoon設定>全体タブのサイトアイコンフォントの以下の部分を変更することで適用することができます。
image.png

ただし「Font Awesomeの6にしかアイコンがないんだが。。。」ということが時たまあるかもしれません。
私の場合「X(旧Twitter)のアイコンを使いたいんだけど、Font Awesome5は無い!6だとあるんだけど・・・」といった状態に陥りました。
以下がそれを示しているものです。
右側のバージョンが5.15.4だとTwitterの旧アイコンはありますが、新しいアイコンはありません。
image.png
一方でバージョンを6.7.2にすると新アイコンも使えそうだということがわかります。
image.png

解決策としてはWordpressのプラグインであるFont Awesomeを導入するといいっぽいです。
これをインストールして有効化します。
image.png
設定はデフォルトのままです。
image.png
このように設定を入れておくとFont Awesome6のものもWordpressに表示されるようになりました。
test02.png
ちなみに、プラグイン有効化前は以下のような表示になってしまっておりました。
Xのアイコンが表示されておりませんね。
image.png

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?