ブログ運営

AFFINGER5でfontawesomeのWebアイコンを表示させる方法

AFFINGER5の投稿画面にもともと用意されているfontawesomeのwebアイコンを表示させる方法です。

AFFINGER5を使いはじめた頃、どうやって表示させるのかわからなくて困ったので、備忘録もかねてまとめてみます。

 

具体的な方法

AFFINGER5にデフォルトで入っているfontawesomeのwebアイコンというのはこの画像のようなもののことです。

タグ>ショートコード 補助>Webアイコン

 

AFFINGER投稿画面

 

このwebアイコンは一覧から選択しただけでは記事でうまく表示されないんです。

 

試しにこのチェックマークを選んで、そのままプレビューで見てみると、

アフィンガー投稿画面

 

プレビュー画面↓↓

 

アフィンガー投稿画面

 

こんなふうにコードがそのまま表示されてしまいます。

 

webアイコンを上手く表示させるには次のようなコードを付け足す必要があります。

 

先ほどのチェックマークで試してみましょう。

タグ>ショートコード 補助>Webアイコン>チェック

 

Wordpres投稿プレビュー

 

ここで出てきたこのコードを、

fa-check-circle

 

こちらのコードと組み合わせます。

<i class="fa ★★" aria-hidden="true"></i>

この★★の部分にさきほどのfa-check-circleをいれてください。

 

こうなりますね。

アフィンガー投稿画面

 

<i class="fa fa-check-circle" aria-hidden="true"></i>

 

これをプレビューで見てみると、

Wordpress投稿プレビュー画面このとおりきちんと表示されました!

 

すごく簡単なことなのですが、初心者はこういうちょっとしたことでつまずきがちです。

 

AFFINGERのバージョンによって付け足すコードが違うようなのですが、わたしが使っているAFFINGER5ではこれで表示できるようになりました。

お困りの方はぜひ試してみてください!

-ブログ運営
-,

© 2021 Moving on!