この記事は、
2020年12月４日に作成しました。
こんにちは tanaka です。
今回は、
Font Awesomeについての説明です。
Font Awesomeの
説明と簡単な使い方を
載せています。
今回は、
無料版の説明をします。
Font Awesomeとは、
Dave Gandy氏らが作った、とても便利なアイコン群です。
ツイッターやインスタグラムなど
自作するには難しいアイコンが用意されており、
利用価値の高いアイコン群です。
Font Awesomeは、
無料版と有料版があります。
| 無料版 | 有料版 |
| 1,609個のアイコン | 7,865個のアイコン |
| 99ドル／1年 |
Font Awesomeは、
バージョンアップで
アイコンの番号が変わる時があるので
バージョンを触る際は注意してください。
それでは、
詳しく説明していきます。
＜コピー、ペーストすると文字化けします＞
このページのコードをコピー、ペーストすると
「ダブルクオーテーションなどの一部が文字化け」
して正常に機能しなくなります。
十分ご注意ください。
Font Awesomeとは？
Font Awesomeとは、
Dave Gandy氏らが作った、とても便利なアイコン群です。
ツイッターやインスタグラムなど
自作するには難しいアイコンが用意されており、
利用価値の高いアイコン群です。
Font Awesomeには、有料版と無料版がある
Font Awesomeは、
無料版と有料版があります。
| 無料版 | 有料版 |
| 1,609個のアイコン | 7,865個のアイコン |
| 99ドル／1年 |
無料版でも
１,６００個ものアイコンがあるので
無料版で
困ることはないでしょう。
Font Awesomeは、バージョンアップで番号が変わる時も
Font Awesomeは、
バージョンアップで
アイコンの番号が変わる時があります。
バージョンを触る際は
注意してください。
もし、
アイコンが正しく表示されなくなったら
アイコン番号を
調べ直してください。
Font Awesomeは、使う前に準備が必要
Font Awesomeを使うためには、
アイコン群の元となるものを
入れる必要があります。
アイコン群の元の
入れ方は２種類あります。
１：ダウンロード
２：CDN（インターネットで直接呼び出し）
今回は、
２：CDN（インターネットで直接呼び出し）
だけをご紹介します。
Font Awesomeの導入方法（CDN）
Font Awesomeの導入方法（CDN）は、
とても簡単です。
<head></head>の間へ
<link href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet">
文字が途中で切れている場合は
右にスクロールしてください。を入れるだけです。
2020年12月４日現在（バージョンv5.15.1）
これで
アイコンを使う準備が
できました。
Font Awesomeの使い方
次はアイコンを使う方法です。
Font Awesomeの使い方は、
htmlとcssで違います。
html
htmlは、
使いたいアイコンを探し、
タグをコピー
<i class="fas fa-check-circle"></i>を貼り付ければ完成です。
１：アイコン一覧を開く
Font Awesomeのページーを開いて
上にある
start、icons、docs、support、plans、blog
のiconsをクリック。
２：使いたいアイコンを探す
使いたいアイコンを探します。
左のメニューで種類を絞れます。
（freeをクリックするとfree版だけになる）
見つかったら
そのアイコンをクリック。
３：目的のアイコン・タグをコピーペースト
アイコンの上の方にある
solid style(fas)、アイコン図柄、f058、<i class=”fas fa-check-circle”></i>
の左から４番目の
<i class=”fas fa-check-circle”></i>
をクリック。（クリックすると自動でコピーされます）
あとは、使いたい場所（html）に
貼り付けるだけです。
これで完成。
css
cssで使う場合は、
やり方が少し難しくなります。
なぜなら
擬似要素before、afterを
使うからです。
具体的には、
アイコン番号を調べて
擬似要素before、after専用プロパティcontent: “”;
に、バックスラッシュ＋番号を入れます。
.sample90::before {
content: "\f058";
font-family: "Font Awesome 5 Free";
font-weight: 900;
}それでは
順番に見て行きましょう
注意）
アイコン画面の右側に
SOLID REGULAR LIGHT DUOTONE
が無かった場合
擬似要素では使えません
注意）
無料版で使えるのは
SOLID REGULAR LIGHT DUOTONE の内
SOLID REGULAR
です。
SOLID ＝ font-weight: 900;
REGULAR ＝ font-weight: 400;
１：アイコン一覧を開く
Font Awesomeのページーを開いて
上にある
start、icons、docs、support、plans、blog
のiconsをクリック。
２：使いたいアイコンを探す
使いたいアイコンを探します。
左のメニューで種類を絞れます。
（freeをクリックするとfree版だけになる）
見つかったら
そのアイコンをクリック。
３：目的のアイコン番号を覚える
アイコンの上の方にある
solid style(fas)、アイコン図柄、f058、<i class=”fas fa-check-circle”></i>
の左から３番目の
f058
の番号を覚えておきます。
４：アイコン番号を擬似要素に入れる
擬似要素専用プロパティcontentに
バックスラッシュ＋番号
を入れます。
.sample90::before {
content: "\f058";
font-family: "Font Awesome 5 Free";
font-weight: 900;
}これで完成。
バックスラッシュの出し方
Windows ＝ すらっしゅ で文字変換
Mac ＝ optionキーを押しながら ¥キー
Font Awesomeまとめ
Font Awesomeとは、
Dave Gandy氏らが作った、とても便利なアイコン群。
ツイッターやインスタグラムなど
自作するには難しいアイコンが用意されており、
利用価値が高い。
Font Awesomeは、
無料版と有料版がある。
| 無料版 | 有料版 |
| 1,609個のアイコン | 7,865個のアイコン |
| 99ドル／1年 |
Font Awesomeは、
バージョンアップで
アイコンの番号が変わる時がある。
Font Awesomeは、
使う前に準備が必要。
<head> </head>
の間へ
下のコードを入れるを入れる。
2020年12月４日現在（バージョンv5.15.1）
<link href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet">Font Awesomeは、
htmlとcssで入れ方が違う。
html ＝ タグ
css ＝ 擬似要素
<html>
<i class="fas fa-check-circle"></i><css>
.sample90::before {
content: "\f058";
font-family: "Font Awesome 5 Free";
font-weight: 900;
}バックスラッシュの出し方
Windows ＝ すらっしゅ で文字変換
Mac ＝ optionキーを押しながら ¥キー
擬似要素で使えないものもある
アイコン画面の右側に
SOLID REGULAR LIGHT DUOTONE
が無かった場合
擬似要素では使えません
無料版で使えるアイコン
無料版で使えるのは
SOLID REGULAR LIGHT DUOTONE の内
SOLID REGULAR
です。
SOLID ＝ font-weight: 900;
REGULAR ＝ font-weight: 400;
以上、
Font Awesomeとは？
簡単な導入方法と使い方（html,css）
の話でした。
ありがとうございました。