Font Awesome (フォントオーサム) 無料 icon の基本的な使いかた【ルクセリタス】

Font Awesome (フォントオーサム) のアイコンは CSSカスタマイズで
サイトの装飾として使用したり、HTMLコードを記事内に記述するなどして使用します。

初期設定のあとは、実際の使いかたについてまとめていきます。

設定がまだの方は先にこちらの記事からどうぞ↓
プラグインなし！Font Awesome (ﾌｫﾝﾄｵｰｻﾑ) アイコンをルクセリタスで使う方法

contents - 目次 -

1. Font Awesome の基本
- 1.1. アイコンを検索する
- 1.2. コードのコピー / 種類と使い分けのしかた
2. テキストエディタ画面 – HTML に記述する-
3. CSSカスタマイズでのつかいかた
- 3.1. 見出しアイコンの表示

Font Awesome の基本

まず、Font Awesomeのサイト画面でアイコンを検索しコードを取得する基本的な使いかたから。

アイコンを検索する

Font Awesome アイコン一覧から使用したいアイコンを選びます。

アイコンの検索はカテゴリを絞り込んでいくと探しやすいです。

コードのコピー / 種類と使い分けのしかた

今回、 Font Awesome の基本的なカスタマイズに
カワイイ　ブタの貯金箱を使っていきます。

アイコン名の下にあるのが CSS や投稿画面で使用するアイコンコードになります。

コードにカーソルを合わせると COPY の文字が表示され
そのままクリックするとコードをコピーすることができます。

Solid Style (fas)
ブタの貯金箱の場合、無料で使用できるのは Solid のみですが
このベルのアイコンなど Solid (ソリッド) ・Regular (レギュラー) 使用できるものもあります。

この場合、CSSで使用できるのは Regular 白抜きのアイコンになります。

HTMLで使用する場合はコードを使い分けることで Solidを表示することができます。

Solid/Regular のコードの違い

Solid Style = (fas) 
Regular Style = (far)

Unicode / アイコン
これはグラフィックスの作成などに使用するもので私たちが使用するのは残りの2つのコードになります。

Unicode / 英数字
ここでいうと f4d3 はサイトの外観カスタマイズする際に使用する CSS用のコードです。

HTMLコード
投稿記事内にアイコンを表示させるための テキストエディタ画面に記述するコードになります。

テキストエディタ画面 – HTML に記述する-

それでは アイコンのHTMLコードをコピーしたものをテキストエディタに記述してみます。

/* 基本のコード */ 
<i class="fas fa-piggy-bank"></i>

/* 基本のコード */

このコードを記述するだけでアイコンを呼び出すことができます。

こちらの画像は テキストエディタ・ビジュアルエディタ・サイト画面で見たイメージになります。

このようにテキストエディタに記述したコードも画像も
ビジュアル画面では何も表示されていませんがプレビューで確認してみると
ちゃんと表示できていますね。

アイコンのサイズや色をカスタマイズ

アイコンを呼び出すことができたら次にカスタマイズです。

　← コードそのままのサイズで色もまだ黒のままですので初めにサイズを設定していきます。

サイズは現在使用しているフォントサイズを基準に倍率で表示されます。
サイズの目安はこんな感じ。　↓

変更は基本的なコードの piggy-bank の後のコードをプラスするだけです。
先ほどのブタさんにこの fa-2x のコードをつけてみます。
1em という単位は１文字分の長さにあたりますので
2x に設定したということは文字に対して２倍の大きさに設定したということになります。

/*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>

/*Font Awesome サイズごとのアイコンコード*/

微妙なサイズ調整

先ほどの基本のサイズよりも微妙に設定したいという場合があると思います。

サイズは以下のようなコードで指定することができます。

/*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>

/*Font Awesome <div> でのサイズ指定*/

</div>

/*Font Awesome でのサイズ指定*/

サイズ変更は<div> や を使用して指定できますが
指定するコードで下にくる文字との間隔が違ってきます。

コードごとの画像と文字の間隔を見てみてください。

アイコンは文字のサイズに対して設定されますので
div の場合、文字自体をサイズ変更しての設定で
span はアイコン自体の font-size を変更してしまうという感じです。

divを使用する方が、余分なスペースを取られることがないので
サイト全体のバランスから考えた場合、こちらでサイズ調整をする方がいいのではないでしょうか?

それでは divを使用したコードのサイズ指定の画像を見てみます。

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

サイズは em だけではなく px を使用することもできます。

色を変える

　こちらのブタさんは fa-3x のサイズ設定です。
サイズと色の両方の記述をしていきます。

コードは先ほどのサイズごとのアイコンコードと別で
 を使った記述でカラーを指定しています。

/*Font Awesome 色とサイズの指定のアイコンコード*/  
<span style="color: dodgerblue;"><i class="fas fa-piggy-bank fa-3x"></i> 
</span>

/*Font Awesome 色とサイズの指定のアイコンコード*/

今回の色は “dodgerblue" という名前での表記ですが
通常の # から始まる数字のカラーコードでも同じように表記できます。

注意

この を下の行に記述してあげないとコードが消えてしまいますのでご注意を‼

カラーの色見本コードはこちらを参考にしています。
参考にしてみてください。→　WEB色見本大辞典

CSSカスタマイズでのつかいかた

外観カスタマイズから見出しやサイドバーなどでアイコンを表示させる方法です。
CSSカスタマイズでは英数字のユニコードを使用します。

見出しアイコンの表示

こちらは H3 と H４の見出しのサンプル画像です。
見出しにアイコンを指定する場合、CSSに追加記述するコードには before という擬似要素を使用します。

/* 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;/*文字との隙間*/ 
}