AFFINGER メイン

【AFFINGER6使い方】FontAwesome5の設定方法・使い方

「稼ぐ」に特化したWordpressテーマ〜AFFINGER6〜
このブログは「AFFINGER」のテーマを使用しています。
皆さま、おはこんばんは😊
WING AFFINGER5からACTION AFFINGER6になり、FontAwesome5が利用可能になったので、その設定方法と使い方について解説したいと思います✨
ただのでぶ

【AFFINGER6使い方】FontAwesome5の設定方法・使い方

注意ポイント

FontAwesomeは原則としてACTION AFFINGER6のサポート保証外のようなのでご利用する場合は、自己責任にてご使用ください。

【#1】WordPressのAFFINGER管理にて設定確認

step
1
"AFFINGER管理"を選択

step
2
"その他"を選択

step
3
"FontAwesomeIcons4.7.0の読み込み"のチェックをハズす

【AFFINGER6使い方】FontAwesome5の設定方法・使い方①

注意ポイント

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

【#2】FontAwesomeのサイトでメールアドレス登録

step
1
FontAwesomeのサイトにアクセス

【AFFINGER6使い方】FontAwesome5の設定方法・使い方②

step
2
"What's the name of your project or site?"に登録するメールアドレスを入力する

step
3
"Send Kit Code"を押す→入力したメールアドレスにメールが送られる

【AFFINGER6使い方】FontAwesome5の設定方法・使い方③

【#3】メールを確認する

step
1
届いたメールの"Click to Confirm Your Email Address + Set Things Up"を押す

 

【AFFINGER6使い方】FontAwesome5の設定方法・使い方④

【#4】ユーザー登録をする

step
1
"New Password"にパスワードを入力(ここで初設定)

step
2
"Confirm New Password"に①で決めたパスワードを再入力

step
3
"Set Password & Continue"を押す

【AFFINGER6使い方】FontAwesome5の設定方法・使い方⑤

step
4
"What's your first name?"に名を入力

step
5
"How about your last name?"に姓を入力

step
6
"All set. Let's Go!"を押す

【AFFINGER6使い方】FontAwesome5の設定方法・使い方⑥

step
7
登録完了

【AFFINGER6使い方】FontAwesome5の設定方法・使い方⑦

【#5】WordPressのAFFINGER管理に取得したコードを貼り付ける

step
1
FontAwesomeのトップページ右上の""を押す

【AFFINGER6使い方】FontAwesome5の設定方法・使い方⑧

step
2
"Font Awesome CDN"を押す

【AFFINGER6使い方】FontAwesome5の設定方法・使い方⑨

step
3
"free"を選択

step
4
"Webfont"を選択

step
5
"All"を選択

step
6
""を押してコピーする

【AFFINGER6使い方】FontAwesome5の設定方法・使い方⑩

step
7
Wordpress"AFFINGER管理"→"その他"→"コードの出力"→"headに出力するコード"に貼り付ける

【AFFINGER6使い方】FontAwesome5の設定方法・使い方⑪

これで設定は完了です✨

【#6】使い方

step
1
"Icons"を押す

【AFFINGER6使い方】FontAwesome5の設定方法・使い方⑫

step
2
"Free"をチェック

【AFFINGER6使い方】FontAwesome5の設定方法・使い方⑬

step
3
使いたいアイコンを押す

【AFFINGER6使い方】FontAwesome5の設定方法・使い方⑭

step
4
<i class="(クラス名)"></I>を押してコピーする

【AFFINGER6使い方】FontAwesome5の設定方法・使い方⑮

step
5
使用したい箇所に貼り付ける

コードエディターで使う場合

コードエディターの場合は、そのまま貼り付けでOK

【AFFINGER6使い方】FontAwesome5の設定方法・使い方⑯
【AFFINGER6使い方】FontAwesome5の設定方法・使い方⑰
【AFFINGER6使い方】FontAwesome5の設定方法・使い方⑱

ビジュアルエディターで使う場合

ビジュアルエディターで使う場合①

「<i class="fas fa-hamburger"></I>」を下記のように変更する。

[st-i class="(クラス名)" add_style=""]

(クラス名)に<i class="fas fa-hamburger"></I>のfasからのクラス名を入れる。

【AFFINGER6使い方】FontAwesome5の設定方法・使い方⑲
【AFFINGER6使い方】FontAwesome5の設定方法・使い方⑳
【AFFINGER6使い方】FontAwesome5の設定方法・使い方㉑

見出し付きフリーボックスで使う

ビジュアルエディターの見出し付きフリーボックスで使う場合

【AFFINGER6使い方】FontAwesome5の設定方法・使い方㉒
【AFFINGER6使い方】FontAwesome5の設定方法・使い方㉓
【AFFINGER6使い方】FontAwesome5の設定方法・使い方㉔
【AFFINGER6使い方】FontAwesome5の設定方法・使い方㉕

このサイトでは "AFFINGER6"を使用しています

「稼ぐ」に特化したWordPressテーマ〜AFFINGER6〜

「AFFINGER6 ACTION」詳細や購入はこちらから

  • この記事を書いた人

ただのでぶ

ただのでブロガーのただのでぶです(*^^*) 数多あるサイトの中から、訪れてくれてありがとうございます☆ 「稼ぐ」に特化したWordPressテーマ〜AFFINGER6〜を使ってブログを書いています。早くたくさん稼ぎたいです(*´∇`*) 今はAFFINGER6の使い方をメインに更新しています。 雑記ブログになると思いますが、ぜひ色々覗いてみてくださいね♪ ただのでブロガーのただのでぶをよろしくお願いします(*゚▽゚)ノ

-AFFINGER, メイン