ACTION その他

新しいFontAwesomeをアイコンに使用する

FontAwesome5をブロック等で使用する方法です。

FontAwesomeは他サービスの為、原則としてサポート、保証外です。ご理解の上でご参考下さい

下準備

旧FontAwesomeの読込を停止

「テーマ管理」>「その他」にある”FontAwesomeIcons4.7.0の読み込み”のチェックを外し、無効化して下さい。

旧WINGからの移行でFontAwesomeIcons4.7.0を使用している場合はアイコンが非表示になるので注意して下さい

FontAwesome5のコードをコピー

fontawesomeのガイドに従い、headに貼り付けるコードをコピーします。

テーマ管理に貼り付け

「テーマ管理」>「その他」>”headに出力するコード”にコピーしたコードを貼り付けます。

アイコンの選択

使用したいアイコンのclassを確認します。(上図の場合はfas fa-cat

アイコンを使用する

ブロックで使用する

オリジナルブロックの「アイコンクラス」に先ほどのclassを記載します。

管理画面上ではアイコンは表示されません

コードが適切に反映されている場合、ブラウザで確認するとアイコンが表示されます。

 

これはダミーのテキストです

ショートコードで表示する

[st-i class="(クラス名)" add_style=""]でも表示できます

[st-i class="fas fa-cat" add_style="margin-right:5px;"]と記載すると以下の様なデザインも可能です。

にゃーん

※「add_style="margin-right:5px;"」は右に5pxの余白を空けるという指定です

解決しないことは検索もしてみてね

AFFINGERのAI(GPTs)で『小学1年生 英語勉強方法 おすすめ』記事を作成

「頭脳」を手に入れるAFFINGER監修 GPTs一覧

あなたにおすすめ

カード型デザイン・ワイドレイアウトなど20以上の特別機能を追加する

AFFINGER EX

ここが便利

  • 20以上の特別機能内容を見る)を解放
  • 列数を変更できるカード型デザイン
  • タグ一覧・無限スクロール・ワイドデザイン 他多数

EX版はAFFINGERを購入した方だけがアップデート(有料)できる最上位版です。

様々なアクセスアップや収益化に役立つ機能が搭載しており、非常に満足度と人気の高いバージョンです。

サンプルをみる

追加機能の詳細はコチラ

AFFINGER6EX(アップグレード)版 - 【公式】STINGER STORE
AFFINGER6EX(アップグレード)版 - 【公式】STINGER STORE

AFFINGER6EXはAFFINGER6購入ユーザーのみがアップデートできる20以上の特別機能が備 ...

on-store.net

オススメ記事

no image 1

ver20240115よりレイアウト及びウィジェットエリア名称を一部変更いたしました。 下部にPDF ...

2

https://action-sample.com/ 上のサイトのようなカテゴリーで分けた記事一覧の ...

3

AFFINGERブロックプラグインプラグインを有効化しよう 当テーマは「AFFINGERブロックプラ ...

-ACTION, その他

PAGE TOP