deCo..boCo..

でこぼこな人生。もっと楽しく…。

Font Awesomeでアイコンを使いこなそう!【はてなブログ】

f:id:nishi244455666:20170713234254p:plain

上の画像のような一風変わったアイコンを見たことはありませんか?

ブログやウェブサイトで広く使われているWebアイコンフォントですが、今回はFont Awesomeというサービスと、その導入方法についてご紹介していきます。

f:id:nishi244455666:20170810131908p:plain

Font Awesomeってなに?

       

かんたんに説明するとウェブサイトやブログなどでWebアイコンを表示してくれるサービスのことです。

サンプルとして見出しの下に7つのアイコンを載せてみましたが、Webアイコンはあくまでフォントなので、文字と同じように扱うことが出来るのです…。

つまり何が言いたいかというと、文字と同じように『サイズを変えたり、色を変えたり』が可能な訳です。

今回のサンプルで挙げたアイコンもサイズは30pxで統一、色はそれぞれのカラーコードを書き加えているのでご覧の通りの表示がなされる訳です。

そんなFont Awesomeの導入と使い方について以下でお知らせします。

 

Font Awesomeの導入準備

準備といっても、以下のコードをコピーして指定の箇所にペーストするだけなのですぐに終わります。

はてなブログのダッシュボードを開き『設定>詳細設定>headに要素を追加』にコードを書き加えるだけです。

 不安な方はこちらをクリック!

画像の赤い丸を目印に、コピペをしましょう!

これで準備は終わりです!

では実際に次のパートでアイコンを使ってみましょう。

 

Font Awesomeの使い方

準備も簡単でしたが、使うのもとてもシンプルなのです。

Font Awesomeでは675種類のアイコンを扱っていますが、その中から好きなものを選ぶだけなのです。(アイコンの種類はVer.4.7.0時点における数です)

 

使いたいアイコンを探そう!

f:id:nishi244455666:20170714011919p:plain

以下のリンクからアイコンの一覧ページへ飛べますので実際に見てみましょう。よく使うページでもあるのでブックマークしても良いかもしれません。 

Font Awesome Icons

たくさんのアイコンが並んでいると思いますが、好きなものを選んでください。

今回は『★star』を使って説明を続けていきます。

 

コードをコピーしよう!

f:id:nishi244455666:20170714045607p:plain

お好きなアイコンをクリックすると詳細が書かれたページが開きます。

実際にアイコンをブログで使うには赤い枠で囲った<i class〜> </i>という箇所を、そのままコピーすれば良いだけ!

 

コードを貼り付けよう!

ブログ記事内のHTML編集を開き、アイコンを表示させたい場所に先程のコードを貼り付けます。

 

<i class="fa fa-star" aria-hidden="true">アイコンを表示する</i>

と、HTML画面で書くと…

アイコンを表示する

 たったこれだけの作業で、あなたの書く記事にアイコンを表示できるのです。

 

大きさを変えよう!

記事の冒頭で『Webアイコンはフォント扱いなので大きさや色を変えられる!』とお伝えしました。

Font Awesomeではアイコンの大きさをカンタンに変えることが出来ます。

大きくするためには先程のコード<i class〜> </i>に以下のコードを書き加えるだけで良いのです。

fa-lg(1.3倍) fa-2x(2倍) fa-3x(3倍) fa-4x(4倍) fa-5x(5倍)

下のコードの赤字の箇所のようにコードを書き足すだけで大きさを変えられます。

<i class="fa fa-star fa-2x" aria-hidden="true">アイコンを表示する</i>

実際に1.3倍~5倍までを表示すると…

 
 
 
 
 

このように簡単にフォントサイズを変更する事が出来るのです。

 

色を変えよう!

大きさと同じように、アイコンの色も簡単に変えることが出来ます。

今回はclassを追加してCSSで一括変更するのではなく、大きさのようにその都度コードに色の情報を書き足していきます。

<i class="fa fa-star " style="color: #ffd700;"> </i>

 

赤字の箇所のように色を指定します。今回は星らしく黄色系のコードを書き加えたので上の様な色に変わりましたね。

ちなみにstyleで『色と大きさ』の両方を指定することもできます。

例えば

<i class="fa fa-star "font-size:60px; style="color: #ffd700;"> </i>

 と次のように色の前にフォントの大きさのコードを書き加えると

 

60pxの大きさの黄色い星を表示する事が出来ます。もちろんpxの数値を変えると好きな大きさに変えられます。

 

囲み線?回転?使い方の応用編

あまり使う機会はないのかもしれませんが、特別なclass名を書き足すことでより個性的なアイコンに変わります。

fa-spin:アイコンが回転する
fa-border:周りに囲み線を作る
fa-rotate-90:アイコンの角度を変更

スピンを例にコードの記入例を挙げると、

<i class="fa fa-star fa-2x fa-spin">

のようにコードを書き足してあげると以下の様な動きになります。

   

 

Font Awesomeを使って、あなたのブログをより個性的なサイトにしましょう!

この記事がお役にたちましたら、ブログで紹介していただけると嬉しいです…。