fontAwesome

WEB

超簡単!!Font Awesome(Version 5)の使い方

アイコンフォント『Font Awesome』の使い方について説明します。

アイコンフォント『Font Awesome』とは?

アイコンフォントとは、アイコンをフォントとして利用できるようにしたものです。サイズや色など、すべて CSS で調整することができます。また、画像でアイコンを貼るのと違って、拡大してもぼやけることもありません!!

今回は、種類が豊富な Font Awesome をご紹介します。

こちらの記事では、2017年末にリリースされた Font Awesome(Version 5)について説明します。Font Awesome(Version 5)には、無料プランと、有料の PROプラン があります。 有料プランはアイコンの種類も多く、料金は $60 です。ちなみに、旧バージョンもこれまで通り使い続けることができます。

ダウンロードの必要はなく、CDN(Contents Delivery Network)で利用が可能です。

CDN とは、専用のサーバー上にある画像やフォントなどのデータを読み込んで、自分の Webサイトに表示させる仕組みです。自分のサーバーへの負荷を減らせ、アイコンをダウンロードしなくても使うことができます。つまり、Font Awesome に新しいアイコンが追加されたときも、ダウンロードし直す必要はありません。

Font Awesome 公式サイト
 

Font Awesome の使用方法

公式サイト にアクセスし、下記画像の水色の枠で囲んだ「How To Use」をクリックします。

fontAwesome

 

② 下記画像の水色の枠部分が、CDN のコードです。こちらをコピーして <head></head> 内にペーストします。よく分からない場合は、</head> の直前に貼り付ければ大丈夫です。

水色の枠右下のクリップボードのイラストをクリックすると、簡単にコピーすることができます。

fontAwesome

 

③ 次に、下の画像の水色の枠で囲んだ「Icons」をクリックします。

fontAwesome

 

④ 下の画像のように表示されるので、使用したいアイコンをクリックします。ここでは例として、水色の枠で囲んだアイコン(address-book) を選びます。

fontAwesome

 

⑤ 下の画像の水色の枠で囲んだ部分をコピーして、HTML 内のアイコンを表示させたい位置に貼り付けるだけでおしまいです。

fontAwesome

はてなブログの場合、HTML 編集画面で貼り付けたときにコードが消えてしまうことがあるようです。

まとめ

とても簡単に使える Font Awesome ですが、なんと商用利用も可能とのこと!!

ぜひ気軽に使ってみましょう。

 

 
スポンサードリンク
 
スポンサードリンク

Broken Link Checker でリンクエラーになってしまう?その対処法について次のページ404

関連記事

  1. 黄色い壁を背に喜ぶ女性

    WEB

    画像圧縮なら『TinyPNG』、使い方とその実力を検証します

    画像を圧縮するならパンダでおなじみの『TinyPNG』、画質を落とさず…

  2. シャットダウン

    WEB

    XSERVER(エックスサーバー)で設定したドメインを削除する方法

    せっかく取得したドメインですが「もう使わないから削除したい!」そう思っ…

  3. 窓

    WEB

    TCDのテーマ『MAG』で『関連記事カードリンク』を新しいタブで表示する方法

    私も大のお気に入りで、このブログでも使用しているTCDさんのテーマ『M…

  4. 腕を交差させる草原に座った男性

    WEB

    データベース内の文字列の書き換えに便利な『Search Replace DB』の使い方

    データベース内の文字列の書き換えに便利な『Search Replace…

  5. Google Search Console
  6. 歩道を歩く男性

    WEB

    DIVERのAMPページに『リンクユニット広告』を表示させる方法

    WordPressのテンプレート『DIVER』で、AMPページにリンク…

== WORDPRESS 完全マニュアル ==

wordpress

よく読まれている記事

  1. cyclists
  2. 郵便受け
  3. local by flywheel
  4. ドメイン
  5. 窓
  6. 子猫をのせた乳母車を押す親猫
  7. ガッツポーズする男性
  8. ブランコに乗る女の子
  9. pencils
  10. カレンダー

当サイトで使用しているテーマはこちら!!

アフィリエイトサイトにはDiverもお勧め!!

WordPressでブログ始めてみませんか?

パソコンを覗き込む二人の女子
  1. 空にかざした水晶

    WEB

    Retinaディスプレイでもロゴ画像がぼやけないように、クッキリと表示させる方法…
  2. 黄色い壁を背に喜ぶ女性

    WEB

    画像圧縮なら『TinyPNG』、使い方とその実力を検証します
  3. pencils

    WEB

    さあ、WordPress(ワードプレス)でブログを始めよう!!
  4. 3匹のカエル

    WEB

    アメブロの見出しをカスタマイズする方法
  5. カレンダー

    WEB

    WordPressのテーマ『MAG』で最終更新日を表示する方法
PAGE TOP