テーマDiverでカスタマイズできるアイコンフォント「Font Awesome」を理解しよう

有料テーマDiverでテキストに「アイコン」を入れるカスタマイズができます。

 

たとえば、

こんなのとか

 

amazonなどを画像にしなくてもテキストで簡単にできちゃいます。

 

今回は、この仕組みと設定方法についてご紹介します。

 

Diverで使われているアイコンの仕組み

テーマDiverでカスタマイズできるアイコンフォント「Font Awesome」を理解しよう

Diverでは「Font Awesome」を利用しています。

「Font Awesome」は、Web上でアイコンを文字として使うことができるツールです。

 

画像ではなく文字なので、テキストエディター上で自由に、アイコンの大きさや色変更ができます。

 

こちらは無料で、商用利用も可能です。

Diverのアイコンフォントの使い方

では、Diverで使うアイコンフォントの仕組みはこちらです。

 

diver-icon 「入力補助」を選択

 

 

diver-icon2 「アイコン」を選択

 

 

Diverのアイコンでは、アイコンの種類、色、サイズをカスタマイズすることができます。

 

種類はなんと786種類登録されています。

 

色は「色を選択」でどんな色でも変更可能です。

 

サイズは「周りに合わせる」と「サイズを指定する」の2種類があります。

 

大きさを特に設定しなくていいなら「周りに合わせる」。

他より大きくさせたり小さくしたいなら「サイズを指定する」。

 

 

参考までに大きさの例を入れておきます。

 

 

 

「サイズを指定する」16pxの場合

 

 

「サイズを指定する」36pxの場合

 

「サイズを指定する」56pxの場合

 

大きさによって見安さが全然違います。

 

アイコンを探したい時便利なサイト

テーマDiverでカスタマイズできるアイコンフォント「Font Awesome」を理解しよう

アイコンは786種類あリます。

 

なのでDiverの選択画面の中から自分の使いたいアイコンがあるのか探すとちょっと時間がかかりそう。

 

そんなときは、アイコンを検索できるサイトをつかいましょう。

 

私がおすすめするサイトは、「Search for Font Awesome」というサイトです。

https://search-fa.com/

 

ここでは、Font Awesomeのアイコンを日本語、英語、カタカナで簡単一発検索することができます。

 

「Search for Font Awesome」の使い方

たとえば、「鍵」のアイコンを使いたいと言う時探してみましょう。

 

まず、「Search for Font Awesome」のサイトにアクセスします。

アクセス方法は次のURLを選択してください。

https://search-fa.com/

 

 

 

鍵フォント

選択が完了すると一番最初の画面に入力フォームがあります。

 

その入力フォームに「鍵」と入力すればOK。

 

するとしたに鍵に関するアイコンが表示されます。

 

表示されたアイコンで気に入ったものがあれば、

Diverの入力補助から探してください。

 

もし、めんどうなら「Search for Font Awesome」からコピーをして書き換えましょう。

 

 

「Search for Font Awesome」からアイコンを入れるには、次のようにやります。

 

使用したいアイコンの赤枠のところを選択。

選択すると左のhtmlの記述をコピーしてくれます。

 

 

あとは、テキストエディタに変更して貼り付けたいところに「ctrl」+「V」ボタンを押せば完了です。

 

 

ただ、「Search for Font Awesome」からコピーだと文字の大きさや色変更ができません。

 

「Search for Font Awesome」からコピー元

 

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

 

なので、もし色を変更したい場合は以下を追加してください。

<i class="fa fa-key" style="color: #ff0000;" aria-hidden="true"></i>

 

もし、文字の大きさを変更したいなら次の項目を追加してください。

<i class="fa fa-key fa-5x" aria-hidden="true"></i>

大きさは、5種類の中から選べます。

fa-lg(約1.33倍)」「fa-2x(2倍)」「fa-3x(3倍)」「fa-4x(4倍)」「fa-5x(5倍)」

 

まとめ

テーマDiverでカスタマイズできるアイコンフォント「Font Awesome」を理解しよう

Diverのアイコンフォントですが、大きさや色を自由にカスタマイズして便利に利用しましょう。

 

ただ検索がちょっとしづらいので、困ったときは「Search for Font Awesome」のサイトを使ったりしましょう。

 

 

スポンサーリンク
斉藤かずまのLINEアカウント開設しました。

LINEアカウントを開設しました。 アフィリエイトに関するお得な情報をご紹介しております。  登録いただいた方限定で、 副業・アフィリエイトに関するあなたの悩みを おひとつ無料で回答させていただきます。

LINEアカウントを開設しました。
アフィリエイトに関するお得な情報をご紹介しております。

新規ご登録いただいた方限定で、副業・アフィリエイトに関するあなたの悩みを、おひとつ無料で回答させていただきます。

副業で悩んでいる方はぜひご利用ください!

お友達登録方法

PCの方
スマホでQRコードよりアクセスしてください
LINEアカウントを開設しました。 アフィリエイトに関するお得な情報をご紹介しております。  登録いただいた方限定で、 副業・アフィリエイトに関するあなたの悩みを おひとつ無料で回答させていただきます。
SPの方
下記のボタンよりアクセスしてください

Twitterでフォローしよう

おすすめの記事