東京のホームページ制作会社・web制作会社
株式会社シンシエイト

【超簡単】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タグ内に貼り付ける。

 

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

 

 

青山 優
この記事を書いた人
青山 優
関連する記事
SimilarWebの信憑性を徹底検証。10万PVの自社メディアのGAデータと比較してみました。
ウェブサービス・アプリケーション
タスク管理アプリ「Producteev」のメンバー運用の基本マニュアル
ウェブサービス・アプリケーション
【mac】keynoteで縦書きテキストは出来ないことが判明!
ウェブサービス・アプリケーション
5人以上のメンバーでタスク管理をするなら無料アプリの「Producteev」がオススメ!
ウェブサービス・アプリケーション
タスク管理アプリ「Producteev」のマネージャー運用の基本マニュアル
ウェブサービス・アプリケーション
大量の重い画像や動画ファイルを送れる「firestorage」
ウェブサービス・アプリケーション
タスク管理アプリ「Producteev」のメンバー初期設定
ウェブサービス・アプリケーション
iPhoneの無料アプリ「ImgPlay」でGIFアニメを作ってみた
ウェブサービス・アプリケーション
CSS3とHTML5のブラウザバージョン対応を一括チェックする便利ツール
ウェブサービス・アプリケーション
タスク・スケジュール管理の決定版!三種の神器アプリと絶対漏れない運用方法を大公開!
ウェブサービス・アプリケーション
株式会社シンシエイト ブログ ウェブサービス・アプリケーション 【超簡単】Font Awesomeでアイコンを表示させる方法

web制作とマーケティングで
貴社の経営課題を解決します

web制作でのブランディングや、コンテンツマーケティング・SEO・ネット広告を中心としたウェブマーケティングを通じて、企業の事業を加速させるご提案をしています。

お電話でのお問い合わせはこちら

現在リモートワーク推進中のため、お電話が繋がりにくくなっております。
受付時間は平日10:00〜18:00です。セールス目的のお電話はご遠慮ください。