Font Awesomeとは何か。
アイコンをフォントとして扱える事ができるので、簡単に大きさの変更や動きを加える事ができるものです。
わざわざ画像を挿入して大きさを変えて等を行わなくてもいいので、記事を書く際に便利です。
こういうアイコンを表示する事ができます。
原理とかいいので、はやく使い方を知りたいと思う方が多いと思うので早速使い方を書いていきます。
その前に、大変わかりやすく説明されているサイトがたくさんあったので参考にさせていただきました。
この場を借りてお礼申し上げます。ありがとうございました。
スポンサードサーチ
目次
Font Awesomeの使い方
使用するまでの準備
使用するに当たって下記コードを追加します。
追加場所は<head>～</head>の中。
Webアイコンフォントを使用するためのコード
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
Webアイコンフォントに動きをつける為のコード
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.10/font-awesome-animation.css" type="text/css" media="all" />
動かなくてもいいよ！アイコンフォントのみが使用したい！と言う方は上のWebアイコンフォントを使用するためのコードだけを追加すれば大丈夫です。
バージョンはどんどん新しくなります。
この記事を書いている現在はVersion5.8です。
使用したいアイコンが表示されな等がありましたら、上のWebアイコンフォントを使用するためのコードが古い可能性があります。
Font Awesomeにアクセスし、最新バージョンを使用してください。
赤枠内のコードをコピーして上のWebアイコンフォントを使用するためのコードの変わりにこちらを追加してください。
追加場所
header.phpの<head>～</head>の中に上記コードをコピペで追加します。
外観 → テーマの編集 → header.php
使用方法
-
Font Awesomeにアクセスします。
有料版と無料版がありますが無料版でも使用できるアイコンがたくさんあるのでどうしても使用したいアイコンない限り無料版でも十分です。
-
Iconsを選びます。
ブラウザの表示が小さい場合左上のを押すとサイドにIconsが表示されます。
-
左側のFREEにチェックをいれると無料で使用できるアイコンが表示されます。
-
使用したいアイコンを選択します。
アイコンは検索する事もできます。
handと検索したのでhand一覧が表示されその中のhand-peaceを選んでみました。
-
コードをコピーします。
赤枠部分をクリックすると自動的にコピーされます。
-
アイコンを表示させたい位置にコピーしたコードを貼り付けます。
コピーしたコード<i class="far fa-hand-peace"></i>
←このピースアイコンが表示されます。
例えばこのコードを記事内に書いたとします。
<i class="far fa-hand-peace"></i>ピース！
するとこのように表示されます。
ピース！
特殊な使い方
<i class=””></i>の””内にコードを追加する事で大きさを変えたり動きを加えたりすることができます。
大きくして動かすなどの2つのコードを組み合わせて使用することも可能なので色々と試してみてください。
必ず半角スペースを入れてからコードを追加してください
サイズを変更する
例えば<i class="far fa-hand-peace fa-2x"></i>fa-hand-peaceの後に
半角スペースを入れてfa-2xを追加することでこのように大きさを変更できます。
<i class="far fa-hand-peace fa-xs"></i>
<i class="far fa-hand-peace"></i> (指定しない場合はこの大きさです。)
<i class="far fa-hand-peace fa-2x"></i>
<i class="far fa-hand-peace fa-3x"></i>
<i class="far fa-hand-peace fa-4x"></i>
<i class="far fa-hand-peace fa-5x"></i>
数字を大きくすればその分大きくなります。
例えばfa-10xにすると
<i class="far fa-hand-peace fa-10x"></i>となり
こんなにも大きくなります。
角度を変える
<i class="far fa-hand-peace fa-rotate-90"></i>
<i class="far fa-hand-peace fa-rotate-180"></i>
<i class="far fa-hand-peace fa-rotate-270"></i>
<i class="far fa-hand-peace fa-flip-horizontal"></i>
動きを加える
<i class="far fa-hand-peace faa-vertical animated"></i>
fa-hand-peaceの後に半角スペースを入れてfaa-vertical animatedを追加することで
このように動きを加えることができます。
※animatedの前にも半角スペースがあるので気をつけてください。
<i class="far fa-hand-peace faa-wrench animated"></i>
<i class="far fa-hand-peace faa-ring animated"></i>
<i class="far fa-hand-peace faa-vertical animated"></i>
<i class="far fa-hand-peace faa-bounce animated"></i>
<i class="far fa-hand-peace faa-flash animated"></i>
<i class="far fa-hand-peace faa-horizontal animated"></i>
<i class="far fa-hand-peace faa-spin animated"></i>
<i class="far fa-hand-peace faa-float animated"></i>
<i class="far fa-hand-peace faa-pulse animated"></i>
<i class="far fa-hand-peace faa-shake animated"></i>
<i class="far fa-hand-peace faa-tada animated"></i>
<i class="far fa-hand-peace faa-passing animated"></i>
<i class="far fa-hand-peace faa-passing-reverse animated"></i>
<i class="far fa-hand-peace faa-burst animated"></i>
組み合わせ
上記でも言ったように組み合わせて使用することも可能です。
大きさを変えて、動きを加えてみます。
fa-2xとfaa-bounce animatedを追加してみました。
<i class="far fa-hand-peace fa-2x faa-bounce animated"></i>
このようになります。
スポンサードサーチ
おわりに
最初の設定さえすれば後はコピペで簡単に使用できるようになります。
今回は個人的にによく使用する物を選んで記載しましたが、まだ他に色を変えたり枠をつけたりとバリエーションがたくさんあるみたいなのでご自身で設定してみてはいかがでしょうか。
