最終更新日: 2021年1月31日

    FontAwesomeをローカルで読み込む方法を紹介！

    FontAwesomeは画像やテキストなどを用いるよりも簡単にアイコンを追加できます。この記事ではFontAwesomeのアイコンをローカルにダウンロードして使用する方法を解説します。ダウンロードして使用することでサイト表示の速度を改善することができます。

    コンテンツ [表示]

    1. 1FontAwesomeをローカルで読み込みたい
    2. 2FontAwesomeをローカルで読み込む方法

    FontAwesomeをローカルで読み込みたい

    普段FontAwesomeを使用するときheadタグ内でCDNを読み込むことにより、アイコンを使用していると思います。しかし、CDNを読み込む際にネットワーク環境が悪いと、読み込みが遅くなりサイトの表示が遅くなり、表示されないといった問題が起こります。

    この問題を解決する方法としてFontAwesomeをローカルで使用するというものがあります。ローカルとは今まで読み込んでいたFontAwesomeをダウンロードしてネットワークを介さないことを言います。

    今回はFontAwesomeをダウンロードして使用する方法を解説します。

    Photo byPexels

    FontAwesomeをローカルで読み込む方法

    では実際にFontAwesomeをローカル環境にダウンロードして、表示させる方法を解説します。

    まず最初にこちらのサイトのDownload Font Awesome Free for the Webからダウンロードしてください。

    そしてzipファイルを開封後、CSSファイルの中のall.min.cssとwebfontsフォルダそのものの２つを表示させたいページにコピペします。

    その際に注意事項があります。

    コピペして自分のファイルに移す際に、

    • webfontsフォルダ
    • CSS/all.min.css
    というディレクトリの関係を維持するようにしてください。この関係が崩れると表示されません。

    これでCDNなしでFontAwesomeを使用することができるようになりました。

    実際に表示できていることを以下のサンプルコードで確認してください。

    GeekHive採用サイト

    関連記事