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
関連記事
WordPressのテーマのアップロードとテーマ選び|無料・有料テーマ
WordPressでは サイトのデザインを決めるテンプレートの事を テーマ と呼 ...
カスタム構造を使って最適なパーマリンクを設定【WordPress】
記事作成を始める前に必要な パーマリンクの設定 をします。 これは 記事ごとのU ...
【 SEO対策 】Google XML sitemapの設定|WordPress プラグイン
自身のWebサイトのSEO対策として 必ず行っておきたい設定が Google X ...
【ルクセリタス】グリッドレイアウトとサムネイル(アイキャッチ)の組み合わせ
WordPressサイト Luxeritas テーマの 記事一覧ページの表示で ...
Adobe Stock の無料素材を使ってみる
Adobe Stock は写真・イラスト・ベクター画像など 膨大な数の 画像など ...
Crayon-Syntax-Highlighter のエディタ画面をカスタマイズ【ワードプレス|プラグイン】
Crayon-Syntax-Highlighter は 投稿記事に カスタマイズ ...
Tag