【超簡単】Font Awesomeでアイコンを表示させる方法

WebサイトやWebアプリでアイコンを表示させたい場面が多々ありますよね。Font Awesomeであればリテラシーが高くなくても簡単にアイコンを表示することができます。この記事では最新版のFont Awesomeの始め方について手順に沿ってまとめました。

Font Awesomeとは

Font AwesomeとはWeb上でアイコンを表示させたい場合に使います。多くの人が利用しており、素晴らしいライブラリとして定評があります。アイコンを、画像としてではなくフォント(文字)として使用するため、大きさや色の変更ができるのはもちろん、アイコン内に文字を入れることもできるとても便利なツールです。これらの機能が無料版でも利用でき、それに加え商標利用も可能です。

 

Font Awesomeに会員登録する

手順(1): Font Awesomeにアクセスして「Start for Free」(無料版)をクリック。

※今回は無料版の説明です。無料版でも十分に素晴らしい機能を利用でき、まずは無料版をお試しされることをおすすめしております。

 

手順(2): ①メアドを記入し、②Send Kit Codeをクリックする。

 

手順(3):↓このようなメールが来るので「Click to Confirm Your Email Address+Set Things Up」をクリックする。

 

手順(4): ①パスワードの設定②パスワード確認③「Set Password&Continue」をクリックする。

 

手順(5):①first name(名)②last name(姓)を入力し③はUnknownのままで一旦OK④はお気に入りのFont Awesomeがあれば記入しますが、なければ空欄のままで「All set. Let’s go!」をクリックする。

 

手順(6):写真右下の黄色の丸で囲まれてた「Copy Kit Code!」押したらコードがコピーされる。

 

手順(7):コピーしたコードを下記のようにheadタグ内に貼り付ける。

<!DOCTYPE html>
<html lang="ja">
  <head>
  <meta charset="UTF-8">
  <!-- ここに貼り付ける-->
  https://kit.fontawesome.com/◯◯.js
  </head>
  <body>
...........
  </body>
</html>

 

いかがでしたか?以上で発行が完了です。複雑なことはせずに簡単に発行できたと思います。決してリテラシーが高くない人でもできるはずです!

 

 

青山 優
この記事を書いた人
青山 優
関連する記事
keynoteで強制縦書き
【mac】keynoteで縦書きテキストは出来ないことが判明!
ウェブサービス・アプリケーション
ブラウザのCSS3とHTML5のプロパティ対応チェックツール
CSS3とHTML5のブラウザバージョン対応を一括チェックする便利ツール
ウェブサービス・アプリケーション
大量の重い画像や動画ファイルを送れる「firestorage」
ウェブサービス・アプリケーション
iPhoneアプリでGIFアニメ作成
iPhoneの無料アプリ「ImgPlay」でGIFアニメを作ってみた
ウェブサービス・アプリケーション
タスク管理の三種の神器
タスク・スケジュール管理の決定版!三種の神器アプリと絶対漏れない運用方法を大公開!
ウェブサービス・アプリケーション
SimilarWebは信用できる?
SimilarWebの信憑性を徹底検証。10万PVの自社メディアのGAデータと比較してみました。
ウェブサービス・アプリケーション
マーケティングとWeb制作で
貴社の経営課題を解決します

市場調査や競合調査を始め、企業やサービスの優位性を理解した上で、UI/UX設計やコンテンツマーケティング、SEO・ネット広告を中心としたWebマーケティングを通じて、ビジネスを加速させるご提案をしています。