Font Awesomeについて
Font Awesomeを使うには、いくつかの方法があります。
- アカウントを登録して、kitというものから使用する。
- CDN（コンテンツデリバリーネットワーク）から使用する。
- ダウンロードし、ファイルを配置して使用する 。
Font Awesome 5から課金のProができたこともあり、今後①を主流にしていく流れの様ですね。
がっつりアイコンを使うならいざ知らず、ちょっと使いたいだけの人からしたら、登録は面倒と思うかもしれません。
よって、ここでは②と③を紹介していきます！
①紹介しろよ！って思われるかもしれませんが…他の人におまかせします（笑）
2022年2月から、ベータが終わって、本格的にFont Awesome 6が使えるようになりました。
使いたいアイコンについて、調べてみよう！
Font Awesomeの公式サイトのアイコン一覧はこちら！
①から、いろいろなバージョンのアイコンを調べられます。
今回は、このFont Awesome 5のhomeというアイコンを使いたい為、Font Awesome 5を使っていきます。
CDNから使用する方法
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">これを<head>内に書いて下さい。
これでFont Awesome 5を使うことが出来ます。
5.15.4の部分を、6.5.1に書き換えるだけで、Font Awesome 6を使うことが出来ます。
（今現在2024/04では、6.5.1が最新です。）
ダウンロードし、ファイルを配置して使用する方法
Font Awesomeの公式サイトのダウンロードページはこちら！
②から、versionを選択することが出来ます。
ダウンロードする際は、Free For Webを選択して下さい。
webfontsというフォルダーと、all.minというファイルを使います。
webfontsをindex.htmlと同じ階層に、all.minをindex.htmlと同じ階層のcssフォルダの中に入れます。
ゆえに、
<link rel="stylesheet" type="text/css" href="css/all.min.css">これを、<head>内に書いておいて下さい。
これで、Font Awesomeを使うことが出来ます。
具体的な使い方
書き方その1
<i class="fas fa-home abc"></i>.abc {
font-size: 0.8em;
color: #999;
}iタグで書く基本形のやつです。abcは、自分が適当に付けたクラス名です。
これで、色やフォントサイズを変えることが、出来ます。
書き方その2
もう1つ書き方があります。
次回のパンくずリストで扱う書き方ですね。
<span class="abc">Home</span>.abc::before {
font-family: 'Font Awesome 5 Free';
content: '\f015';
font-weight: 900;
font-size: 0.8em;
color: #999;
}contentは、③の部分ですね。バックスラッシュ必須です。
次は、font-weightについての早見表がこちら。
| スタイル | クラス名 | font-weight |
|---|---|---|
| Solid | fas | 900 |
| Regular | far | 400 |
| Light | fal | 300 |
| Brands | fab | 400 |
自分が使っているのはfasの為、900となります。
こちらのspanを使う方が、分かりやすいですね。
さいごに
次のパンくずリストでも、font awesomeを使っています。
パンくずリストとは？ ユーザーが見ているページが、サイトのどの位置なのかを教えてくれるものです。パンくずリストの作り方（html）今から、これを作っていくよ！<link rel="styl[…]
今日は、ありがとうございました。では、また！