当サイトはAMP化した為、動くアイコンの使用をやめましたが、
使いたい方はこちらのやり方でできます。
「ブログに動くアイコンを使いたいけどどうやって使うの？」
「使い方教えて！」
- 動くアイコンフォントの導入方法
- ブログで使う方法
- 特殊な使い方
を説明しています。
アイコンをフォントとして扱える事ができるので、簡単に大きさの変更や動きを加える事ができます。
使ってみたいと思う方は参考にしてください。
目次
Font Awesomeを導入する
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>
このようになります。
おわりに
最初の設定さえすれば後はコピペで簡単に使用できるようになります。
今回は個人的にによく使用する物を選んで記載しましたが、まだ他に色を変えたり枠をつけたりとバリエーションがたくさんあるみたいなのでご自身で設定してみてはいかがでしょうか。
