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 ですが、なんと商用利用も可能とのこと!!

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

 

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

関連記事

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

    WEB

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

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

  2. local by flywheel

    WEB

    Local by Flywheel を使って、ローカル環境を構築してみよう

    『Local by Flywheel』は、簡単に WordPress …

  3. 郵便受け

    WEB

    要素の高さを揃える 『matchHeight.js』の使い方

    float させた横並びのカラムの高さをそろえたい!! だけど、ボック…

  4. Google Search Console
  5. いいえ、結構です。

    WEB

    お名前.comの自動更新の設定を解除する方法

    お名前.com でドメインを取得する際にクレジットカード払いを選択する…

  6. カレンダー

    WEB

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

    このブログでも使用しているTCDさんのWordPressのテーマ『MA…



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

wordpress

よく読まれている記事

  1. local by flywheel
  2. wordpress,ワードプレス
  3. 段ボールを持つ女性
  4. ペンを持つ手
  5. fontAwesome
  6. カメラ
  7. cyclists
  8. 郵便受け
  9. crayon,クレヨン
  10. ガッツポーズする男性

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

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

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

パソコンを覗き込む二人の女子
  1. チェックリスト

    WEB

    『wpX Speed』でDNSレコードから所有権を確認する方法
  2. fontAwesome

    WEB

    超簡単!!Font Awesome(Version 5)の使い方
  3. ドアに差し込まれた封筒

    WEB

    Contact Form 7 のメールが届かない?『WP Mail SMTP』で…
  4. cyclists

    WEB

    【意外と簡単?!】FTPソフト『FileZilla』のダウンロードから使い方まで…
  5. カレンダー

    WEB

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