Font Awesomeの使い方

前書き

Web Fontである「FontAwesome」の使い方について調べてみた。FontAwesome 5 、そしてFreeを使用する前提で書いて行きます。

FontAwesomeサイト

FontAwesome Ver5のサイト 　「https://fontawesome.com/v5/search」

記号を新しく調べる時は上の「RESET」マーク、を押す。

アイコンとコード例

<i class="far fa-arrow-alt-circle-right fa-2x"></i>

<i class="fa fa-bath fa-2x" aria-hidden="true">

<i class="fas fa-check-square fa-2x"></i>

<i class="far fa-check-square fa-2x"></i>

<i class="fa fa-heart fa-2x"></i>

<i class="far fa-arrow-alt-circle-left fa-2x"></i>

<i class="fab fa-twitter fa-2x"></i>

<i class="fas fa-times fa-2x"></i>

<i class="fas fa-ellipsis-v fa-2x"></i>

<i class="fas fa-ellipsis-h fa-2x"></i>

準備

まず「FontAwesome」をリンクするコードを「header.php」に書き込む。

<link href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" rel="stylesheet">

記事内でFontAwesomeを表示する方法

1. 例えば、記事内でハートを表示するには

   <i class="fa fa-heart"></i>

2. フォントのサイズを変更するには。

   クラス名	表示サイズ	表示サンプル
   fa-xs	0.75em
   fa-3m	0.85em
   fa-lg(ｴﾙｼﾞ)	1.33em
   fa-2x	2em
   fa-3x	3em
   fa-4x	4em
   fa-5x	5em

3. フォントの色を変更するには、例：赤色

   <i class="fa fa-heart fa-2x" style="color:red;"></i>

実際の表示例、ハート＋2em＋赤＝

参考にして頂いた記事やサイト

サルワカ | サルでも分かる図解説明マガジン

1 Post

222 Users

788 Pockets

【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう

https://saruwakakun.com/html-css/basic/font-awesome

導入方法から基本的な使い方、「Font Awesome Animation」でさまざまなアニメーション効果を加える方法まで丁寧に解説します。

すまてくブログ

6 Users

コピペするだけ！よく使うWebアイコンFont Awesomeまとめ（はてなブログ） - すま...

https://smatech.hatenablog.com/entry/font-awesome

こんにちは、ヨシタカです！ みなさん、ブログ楽しんでますか？ ふと色々なブログをのぞいてみると、色々なアイコンが使われているのに気づきました。 POINT！ とか すまてくブログ とかありますよね。 ブログにアイコンを使うとなんか楽しい感じになりますよね。 このアイコンってどうやれば使えるんだろう？ 実は、よく見るWebアイコンはFont Awesomeというものを使っていて、コピペするだけでかんたんに自分のブログにも使えるんです！ ブログのデザインテーマにもWebアイコンってあちこちに使われています。 たとえばこのすまてく...