FontAwesome5「アイコン」の使い方【アフィンガー6編】

アフィンガー6のメニューに「アイコン」追加したいけど、FontAwesome5の使い方がわからない…

という方のために、FontAwesome5の使い方を紹介します。

あと、FontAwesome4.7の使い方も書きました。こちらの方が初心者さん向けです。

この記事で分かること

  • FontAwesome5の登録方法
  • FontAwesome5の使い方
  • FontAwesome4.7の使い方

では、順番に説明していきます。

FontAwesome5の登録方法

Font Awesome

FontAwesome5のトップページで「Start for Free」をクリック。

 

メールアドレスを入力します。

 

FontAwesomeから登録したアドレスにメールが届きます。

メールに表示されたボタンをクリックしてください。

 

パスワード入力画面に移動。

任意のパスワードを入力します。

 

アカウントの入力画面です。

こちらは、何も入力しなくても大丈夫です。

 

画面が切り替わったら、右上の「アカウント」をクリック。

 

Font Awesome CDNをクリック。

 

コードをコピーします。

このコードをアフィンガー6に設定します。

 

「Font Awesome CDN」を貼り付ける

設定:「AFFINGE管理>その他

コードの出力”headに出力するコード”に、「Font Awesome CDN」を貼り付けます。

これで設定完了です。

 

FontAwesome5の使い方

左側の「Free」をクリック。

無料で使えるアイコンが表示されます。メニューに表示させたい「アイコン」を選んでください。

 

アイコンを選んだら「コード」をコピー。

 

メニュー画面で「ナビゲーションラベルの前にコードを貼り付け」ます。

あとは「保存」して完了です。

 

FontAwesome4.7の使い方

FontAwesome4.7

FontAwesome4.7は、FontAwesome5の旧バージョン

使い方は「FontAwesome5」と、ほとんど同じです。

 

メニューに追加したい「アイコン」をクリック。

 

表示された「コード」をコピーします。

 

アフィンガー6での設定

設定:「AFFINGER管理>その他

FontAwesome4.7.0の読み込みにチェックを入れてください。

 

メニュー画面で「ナビゲーションラベルの前にコードを貼り付け」ます。

あとは、保存して完了です。

 

FontAwesomeまとめ

僕は今のところ「FontAwesome4.7」を使ってますが、不具合は起きてません。

こちらの方が簡単に使えるので、初心者さんにはおすすめです。

  • この記事を書いた人
  • 最新記事

hiro

2018年からアフィリエイト開始。知識なしの状態から2021年に月5万円達成。現在は「ペラサイト」と並行して「ブログ」もやってます。