Now Loading...

東京都港区のホームページ制作会社 株式会社ENVY DESIGN

03-6435-3276

お問い合わせ
Blog

ブログ

公開日:2018/11/22

category:

Font Awesomeをローカルで読み込めるようにする方法

 

最近では、ほとんどの案件でFont Awsomeのアイコンを使うようになりました。

今回は、Font Awsomeをローカルにダウンロードして読み込む方法をご紹介します。

 

まずは、Font Awsomeのサイトから必要なファイル一式をダウンロードします。

 

 

「Font Awesome Free for the Web」ボタンをクリックするとダウンロードできます。

 

https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

 

 

 

 

ダウンロードしたファイルfontawesome-free-5.5.0-web.zipを解凍すると(2018/11/22時点)以下のような構成になっています。

 

・CSS

・js

・less

・metadata

・scss

・sprites

・svgs

・webfonts

・LICENSE.txt

 

cssディレクトリのall.min.cssを通常のcssと同じように、任意の場所に設置します。

 

例)
<link rel="stylesheet" href="/css/all.min.css">

 

 

次に、webfontsもcssディレクトリと同階層に設置します

※ダウンロードした状態と同じディレクトリ構成となります。

 

これだけで読み込みの準備が整いました。

 

 

あとは、cssファイルで表示させたい箇所に下記のような記述をして使用してください。

 

font-familyは'Font Awesome 5 Free'になります。

 

例)

.sample ::before {
color: #fff;
content: "\f039";
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}

ハマりがちなfont-weightの設定

各アイコンには対応する分類があります。

 

 

このアイコンの場合、無料版ではSOLIDとREGULARです。

これらを使い分けるにはcssにfont-weightを指定する必要があります。

 

SOLID → font-weight:900;

REGULAR → font-weight:400;

LIGHT → font-weight:300;

BRANDS → font-weight:400;

 

BRANDSアイコンを使用するときも注意が必要で、font-familyを下記のように設定する必要があります。

 

font-family: 'Font Awesome 5 Brands';

 

これで、ローカルでFont Awesomeが使用できるようになりました。

WEBに関するお悩みがございましたらご相談ください。
無料お問い合わせはこちら

カテゴリー

新着記事

< /body> < /html>