<>

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

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

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

設定がまだの方は先にこちらの記事からどうぞ↓
プラグインなし!Font Awesome (フォントオーサム) アイコンを ルクセリタスで使う方法

Font Awesome の基本

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

アイコンを検索する

Font Awesome アイコン一覧 から使用したいアイコンを選びます。
Font-Awesome-Icon検索画面

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

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

今回、 Font Awesome の基本的なカスタマイズに
カワイイ ブタの貯金箱を使っていきます。
Font Awesome-アイコンを選択-piggy-bank

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

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

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

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

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

Solid/Regular のコードの違い

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コードをコピーしたものを テキストエディタ に記述してみます。

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

FontAwesome コードをHTMLに記述した場合の画像

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

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

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

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

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

サイズは 現在使用しているフォントサイズを基準に 倍率で表示されます。
サイズの目安はこんな感じ。 ↓
Font-wesome サイズの倍率の解説
変更は基本的なコードの piggy-bank の後のコードをプラスするだけです。
先ほどのブタさんに この fa-2x のコードをつけてみます。
1em という単位は1文字分の長さにあたりますので
2x に設定したということは 文字に対して2倍の大きさに設定したということになります。

微妙なサイズ調整

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

アイコンのサイズ比較-指定なし
font-sizeの指定なし

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

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

アイコンのサイズ比較-0.8em
font-sizeの指定-0.8em

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

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

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

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

アイコンのサイズ比較-0.5em
font-sizeの指定-0.5em

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

アイコンのサイズ比較-0.8em
font-sizeの指定-0.8em

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

色を変える


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

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

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

注意

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

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

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

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

見出しアイコンの表示

見出しアイコンの見本画像

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

外観カスタマイズ の 追加CSS から このコードをベースに
お好きなアイコンを選んでみたり サイズなどの バランスをアレンジしてみてください。

 


以上、FontAwesome の基本的な 使いかたについて のまとめでした。

また、何度も調べるのは大変なので 気に入ったアイコンのコードを
SublimeText などに 書き込んでおいたり
よく利用しそうなアイコンは 定型文登録に登録しておいたりすると便利です。
ぜひ、参考にしてみてください。