- 1. 概要
- 2. アカウント登録
- 3. リンクの設置
- 4. 設置方法
- 5. ローカルに設置
- 6. 参考サイト
1. 概要
「Font Awesome」の設置方法について、記述します。
本ページは、相当古かったので、2026年3月23日、更新します。
2026年5月13日、「Font Awesome」のリンクを参照してたのですが、うまく参照できなくなったので、ローカルに設置します。
末尾をご参照ください。
2. アカウント登録
2026年3月23日現在は、フリーの場合もアカウント登録が必要なようです。
下記へアクセスして。
「Find Icons with the Perfect Look & Feel | Font Awesome」
下記の「Enter your email to get started with a free Kit!」という入力欄にメールアドレスをいれて。
「I agree to ...」へチェックをいれて、「Start for free」
そうすると、入力したメールアドレスに、メールが届きます。
届いたメールの最上位の方に、登録用のアドレスが記載されていますので、そこをクリックすると、下記が表示されます。
パスワードを 2回入力して。
「Set Password & Continue」
自分の情報を入力して。
「All Set. Let's go」
使用するアイコンセットを選択して。
（ここでは、フリーのものを使用しますので、「Free Styles」を選択します）
「Next」
「EASIST」を選択して。
ドメイン名を入力して「Add Domain」（ブラウザ上に表示されるドメイン名です、複数の入力も可能です）
「Next」
「Make My Kit」
下部の、「JavaScript」を貼り付ければ、使えるようになります。
3. リンクの設置
2019年01月23日頃は。
「HTML」のヘッダ部に、以下を記載していました。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
と、上記は、最初に参考にしたサイトのものですが・・・。
2019年02月25日頃は。
「Your Kits | Font Awesome」（配布サイト本家）によって。
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
と記述しておりました。
長くなっとるし、属性名「integrity」「crossorigin」は、エディタによっては警告が表示されますので、その場合はエディタの設定をいじる必要があります。
あんど。下の方で設置していたアイコンが消えてしまった。
表記方法が変わったようです。
2022年6月23日現在の最新リリースバージョンは「6.1.1」とのこと。
また、書き方が変わりました。
探すのが大変でしたが、本家の「Install Manually | Font Awesome Docs」で見つけました。
下記のように記述しました。
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.1.1/css/all.css" integrity="sha384-/frq1SRXYH/bSyou/HUp/hib7RVN1TawQYja658FEOodR/FQBKVqT9Ol+Oz3Olq5" crossorigin="anonymous"/>
だいぶ記述が変わっているようなのですが、古くからあるものも、キープされているようです。
2026年3月19日、バージョン「7.2」になっておりまして。
これは、前項のアカウント登録して、「script」の発行が必要になります。
発行された「script」
<script src="https://kit.fontawesome.com/xxxxxxxx.js" crossorigin="anonymous"></script>
を、「.html」の「<head></head>」内に貼り付ければ、使えるようになります。
4. 設置方法
で例えば、歯車アイコンを表示するには。
<i class="fa fa-cog"></i>
と書けばいいのです。。
でまぁ、書いてみると → ← ここに出ているはず・・・。
このクラス名は検索するしかないみたいです。
5. ローカルに設置
まず、ソースを下記からダウンロードします。
「Download Font Awesome Free or Pro | Font Awesome」
赤枠の「Download Free for Web」をダウンロードします。
（2026年5月13日時点で、バージョンは「7.2.0」でした）
中身のうち必要なものを、下記のディレクトリ構成に配置して。
project/
├── css/
│ └── all.min.css
└── webfonts/
├── fa-solid-900.woff2
└── ・・・
「.html」のヘッダに、下記を記述すれば、表示できます。
<link href="path/css/all.min.css" rel="stylesheet">
6. 参考サイト
本ページは、「Gemini」伍長を参考にさせていただきました。
|
