Font Awesome (フォントオーサム) 無料 icon の基本的な使いかた【ルクセリタス】
Font Awesome (フォントオーサム) のアイコンは CSSカスタマイズで
サイトの装飾として使用したり、HTMLコードを 記事内に記述するなどして 使用します。
初期設定のあとは、実際の使いかたについて まとめていきます。
設定がまだの方は先にこちらの記事からどうぞ↓
プラグインなし!Font Awesome (フォントオーサム) アイコンを ルクセリタスで使う方法
Font Awesome の基本
まず、Font Awesomeの サイト画面でアイコンを検索し コードを取得する 基本的な使いかたから。
アイコンを検索する
Font Awesome アイコン一覧 から使用したいアイコンを選びます。
アイコンの検索は カテゴリを絞り込んでいくと探しやすいです。
コードのコピー / 種類と使い分けのしかた
今回、 Font Awesome の基本的なカスタマイズに
カワイイ ブタの貯金箱を使っていきます。
アイコン名の下にあるのが CSS や 投稿画面で使用する アイコンコード になります。
コードに カーソル を合わせると COPY の文字が表示され
そのまま クリックすると コードをコピーすることができます。
Solid Style (fas)
ブタの貯金箱の場合、無料で使用できるのは Solid のみですが
この ベルのアイコンなど Solid (ソリッド) ・Regular (レギュラー) 使用できるものもあります。
この場合、CSSで使用できるのは Regular 白抜きのアイコンになります。
HTMLで使用する場合はコードを使い分けることで Solidを表示することができます。
Solid Style = (fas) <i class="fas fa-bell"></i>
Regular Style = (far) <i class="far fa-bell"></i>
Unicode / アイコン
これは グラフィックス の作成などに使用するもので 私たちが使用するのは 残りの2つの コード になります。
Unicode / 英数字
ここでいうと f4d3 は サイトの 外観カスタマイズする際に使用する CSS用のコードです。
HTMLコード
投稿記事内にアイコンを表示させるための テキストエディタ画面に記述するコードになります。
テキストエディタ画面 – HTML に記述する-
それでは アイコンのHTMLコードをコピーしたものを テキストエディタ に記述してみます。
1 2 3 |
/* 基本のコード */ <i class="fas fa-piggy-bank"></i> |
このコードを記述するだけでアイコンを呼び出すことができます。
こちらの画像は テキストエディタ・ビジュアルエディタ・サイト画面で見たイメージになります。
このように テキストエディタに記述したコードも画像も
ビジュアル画面では 何も表示されていませんが プレビューで確認してみると
ちゃんと表示できていますね。
アイコンの サイズや色を カスタマイズ
アイコンを呼び出すことができたら 次に カスタマイズです。
← コード そのままのサイズで 色もまだ黒のままですので初めにサイズを設定していきます。
サイズは 現在使用しているフォントサイズを基準に 倍率で表示されます。
サイズの目安はこんな感じ。 ↓
変更は基本的なコードの piggy-bank の後のコードをプラスするだけです。
先ほどのブタさんに この fa-2x のコードをつけてみます。
1em という単位は1文字分の長さにあたりますので
2x に設定したということは 文字に対して2倍の大きさに設定したということになります。
1 2 3 4 5 6 7 8 9 10 |
/*Font Awesome サイズごとのアイコンコード*/ <i class="fas fa-piggy-bank fa-xs"></i> <i class="fas fa-piggy-bank fa-sm"></i> <i class="fas fa-piggy-bank fa-lg"></i> <i class="fas fa-piggy-bank fa-2x"></i> <i class="fas fa-piggy-bank fa-3x"></i> <i class="fas fa-piggy-bank fa-5x"></i> <i class="fas fa-piggy-bank fa-7x"></i> <i class="fas fa-piggy-bank fa-10x"></i> |
微妙なサイズ調整
先ほどの基本のサイズよりも微妙に設定したいという場合があると思います。

サイズは以下のようなコードで指定することができます。
1 2 3 4 5 6 7 8 9 |
/*Font Awesome <div> でのサイズ指定*/ <div style="font-size: 0.5em;"> <i class="fas fa-piggy-bank fa-8x"></i> </div> /*Font Awesome <span> でのサイズ指定*/ <span style="font-size:4.5em; "><i class="fas fa-piggy-bank"></i> </span> |
サイズ変更は<div> や <span>を使用して指定できますが
指定するコードで下にくる文字との間隔が違ってきます。

コードごとの画像と文字の間隔を見てみてください。
アイコンは文字のサイズに対して設定されますので
div の場合、文字自体を サイズ変更しての設定で
span は アイコン自体の font-size を変更してしまうという感じです。
divを使用する方が、余分なスペースを取られることがないので
サイト全体のバランスから考えた場合、こちらでサイズ調整をする方がいいのではないでしょうか?
それでは divを使用したコードの サイズ指定の画像を見てみます。

先ほどの約半分のサイズになりました。

サイズは em だけではなく px を使用することもできます。
色を変える
こちらのブタさんは fa-3x のサイズ設定です。
サイズと色の両方の記述をしていきます。
コードは先ほどの サイズごとのアイコンコード と別で
<span> を使った記述で カラーを指定しています。
1 2 3 4 |
/*Font Awesome 色とサイズの指定のアイコンコード*/ <span style="color: dodgerblue;"><i class="fas fa-piggy-bank fa-3x"></i> </span> |
今回の色は “dodgerblue" という名前での表記ですが
通常の # から始まる数字のカラーコードでも同じように表記できます。
この </span> を下の行に記述してあげないと コードが消えてしまいますのでご注意を‼
カラーの色見本コードはこちらを参考にしています。
参考にしてみてください。→ WEB色見本 大辞典
CSSカスタマイズ でのつかいかた
外観カスタマイズから 見出しやサイドバーなどで アイコンを表示させる方法です。
CSSカスタマイズでは 英数字のユニコード を使用します。
見出しアイコンの表示
こちらは H3 と H4の見出しのサンプル画像です。
見出しにアイコンを指定する場合、CSSに追加記述する コードには before という 擬似要素 を使用します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/* H3 見出しアイコン-chevron-circle-right*/ h3:before { font-family: FontAwesome; content: "\f138";/*ユニコード*/ font-size: 1em;/*サイズ*/ color: #a7d28d; /*アイコンの色*/ padding-right:15px;/*文字との隙間*/ } /* H4 見出しアイコン-check-square*/ h4:before { font-family: FontAwesome; content: "\f14a";/*ユニコード*/ font-size: 1.2em;/*サイズ*/ color: #8fbc8f; /*アイコンの色*/ padding-right:15px;/*文字との隙間*/ } |
外観カスタマイズ の 追加CSS から このコードをベースに
お好きなアイコンを選んでみたり サイズなどの バランスをアレンジしてみてください。
以上、FontAwesome の基本的な 使いかたについて のまとめでした。
また、何度も調べるのは大変なので 気に入ったアイコンのコードを
SublimeText などに 書き込んでおいたり
よく利用しそうなアイコンは 定型文登録に登録しておいたりすると便利です。
ぜひ、参考にしてみてください。
関連記事はこちら↓
ラインを使った 見出しのカスタマイズの記事はこちら
外観 & CSSカスタマイズdesing,Font Awesome,icon,Luxeritas,plugin
Posted by 45
関連記事
AdSense ディスプレイ広告の作成のしかたと Luxeritas ウィジェットでの設置方法
AdSense広告をサイトに掲載するためには Webサイトが審査 → ads.t ...
サイト画面の各名称と ルクセリタスの外観カスタマイズの設定|WordPress
Webサイト作りの最初は サイトの外観のデザインを設定したい!と思うはず。 どん ...
【SublimeText】テキストの背景色と コードの 文字色を変えるシンタックス設定
SublimeText をインストールした直後のテキストは 黒い背景に白文字のシ ...
カスタム構造を使って最適なパーマリンクを設定【WordPress】
記事作成を始める前に必要な パーマリンクの設定 をします。 これは 記事ごとのU ...
アンチスパム【Akismet Anti-Spam】でコメントスパム対策!|WordPressプラグイン
Webサイトのユーザーが増えてくると コメント欄に 関係のない内容を 大量に投稿 ...
CSSで目次をカスタマイズしてみる – WordPress【 Luxeritas 】ルクセリタス
Wordpress 分かりやすいといえば とても分かりやすいのですが、 個人的に ...
Tag