アフィンガー6のメニューに「アイコン」追加したいけど、FontAwesome5の使い方がわからない…
という方のために、FontAwesome5の使い方を紹介します。
あと、FontAwesome4.7の使い方も書きました。こちらの方が初心者さん向けです。
この記事で分かること
- FontAwesome5の登録方法
- FontAwesome5の使い方
- FontAwesome4.7の使い方
では、順番に説明していきます。
FontAwesome5の登録方法
FontAwesome5のトップページで「Start for Free」をクリック。
メールアドレスを入力します。
FontAwesomeから登録したアドレスにメールが届きます。
メールに表示されたボタンをクリックしてください。
パスワード入力画面に移動。
任意のパスワードを入力します。
アカウントの入力画面です。
こちらは、何も入力しなくても大丈夫です。
画面が切り替わったら、右上の「アカウント」をクリック。
Font Awesome CDNをクリック。
コードをコピーします。
このコードをアフィンガー6に設定します。
「Font Awesome CDN」を貼り付ける
設定：「AFFINGE管理＞その他」
コードの出力”headに出力するコード”に、「Font Awesome CDN」を貼り付けます。
これで設定完了です。
FontAwesome5の使い方
左側の「Free」をクリック。
無料で使えるアイコンが表示されます。メニューに表示させたい「アイコン」を選んでください。
アイコンを選んだら「コード」をコピー。
メニュー画面で「ナビゲーションラベルの前にコードを貼り付け」ます。
あとは「保存」して完了です。
FontAwesome4.7の使い方
FontAwesome4.7は、FontAwesome5の旧バージョン。
使い方は「FontAwesome5」と、ほとんど同じです。
メニューに追加したい「アイコン」をクリック。
表示された「コード」をコピーします。
アフィンガー6での設定
設定：「AFFINGER管理＞その他」
FontAwesome4.7.0の読み込みにチェックを入れてください。
メニュー画面で「ナビゲーションラベルの前にコードを貼り付け」ます。
あとは、保存して完了です。
FontAwesomeまとめ
僕は今のところ「FontAwesome4.7」を使ってますが、不具合は起きてません。
こちらの方が簡単に使えるので、初心者さんにはおすすめです。