Font Awesomeとは?簡単な導入方法と使い方(html,css)

この記事は、
2020年12月4日に作成しました。

こんにちは tanaka です。

今回は、
Font Awesomeについての説明です。

Font Awesomeの
説明と簡単な使い方を
載せています。

今回は、
無料版の説明をします。


Font Awesomeとは、
Dave Gandy氏らが作った、とても便利なアイコン群です。

ツイッターやインスタグラムなど
自作するには難しいアイコンが用意されており、

利用価値の高いアイコン群です。

画像blog-what-is-font-fontawesome01

Font Awesomeは、
無料版と有料版があります。

無料版有料版
1,609個のアイコン7,865個のアイコン
99ドル/1年

Font Awesomeは、
バージョンアップで
アイコンの番号が変わる時があるので

バージョンを触る際は注意してください。

それでは、
詳しく説明していきます。

<コピーペーストについて>

コードをコピーする際は
灰色で四角く囲まれた所を使用してください。

<i class="fas fa-check-circle"></i>
スポンサーリンク

Font Awesomeとは?

Font Awesomeとは、
Dave Gandy氏らが作った、とても便利なアイコン群です。

ツイッターやインスタグラムなど
自作するには難しいアイコンが用意されており、

利用価値の高いアイコン群です。

画像blog-what-is-font-fontawesome01

Font Awesomeには、有料版と無料版がある

Font Awesomeは、
無料版と有料版があります。

無料版有料版
1,609個のアイコン7,865個のアイコン
99ドル/1年

無料版でも
1,600個ものアイコンがあるので

無料版で
困ることはないでしょう。

Font Awesomeは、バージョンアップで番号が変わる時も

Font Awesomeは、
バージョンアップで
アイコンの番号が変わる時があります。

バージョンを触る際は
注意してください。

もし、
アイコンが正しく表示されなくなったら
アイコン番号を
調べ直してください。

Font Awesomeは、使う前に準備が必要

Font Awesomeを使うためには、
アイコン群の元となるものを
入れる必要があります。

アイコン群の元の
入れ方は2種類あります。

 1:ダウンロード
 2:CDN(インターネットで直接呼び出し)

今回は、
 2: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月4日現在(バージョンv5.15.1)

これで
アイコンを使う準備が
できました。

Font Awesomeの使い方

次はアイコンを使う方法です。

Font Awesomeの使い方は、
htmlとcssで違います。

html

htmlは、
使いたいアイコンを探し、
タグをコピー

<i class="fas fa-check-circle"></i>

を貼り付ければ完成です。


1:アイコン一覧を開く

Font Awesomeのページーを開いて
上にある

start、icons、docs、support、plans、blog

iconsをクリック。

2:使いたいアイコンを探す

使いたいアイコンを探します。

左のメニューで種類を絞れます。
(freeをクリックするとfree版だけになる)

見つかったら
そのアイコンをクリック。

3:目的のアイコン・タグをコピーペースト

アイコンの上の方にある

solid style(fas)、アイコン図柄、f058、<i class=”fas fa-check-circle”></i>

の左から4番目の
<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;


1:アイコン一覧を開く

Font Awesomeのページーを開いて
上にある

start、icons、docs、support、plans、blog

iconsをクリック。

2:使いたいアイコンを探す

使いたいアイコンを探します。

左のメニューで種類を絞れます。
(freeをクリックするとfree版だけになる)

見つかったら
そのアイコンをクリック。

3:目的のアイコン番号を覚える

アイコンの上の方にある

solid style(fas)、アイコン図柄、f058、<i class=”fas fa-check-circle”></i>

の左から3番目の
f058
の番号を覚えておきます。

4:アイコン番号を擬似要素に入れる

擬似要素専用プロパティcontentに
バックスラッシュ+番号
を入れます。

.sample90::before {
  content: "\f058";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

これで完成。

バックスラッシュの出し方

 Windows = すらっしゅ で文字変換
 Mac   = optionキーを押しながら ¥キー

Font Awesomeまとめ

Font Awesomeとは

Font Awesomeとは、
Dave Gandy氏らが作った、とても便利なアイコン群。

ツイッターやインスタグラムなど
自作するには難しいアイコンが用意されており、

利用価値が高い。

画像blog-what-is-font-fontawesome01
無料版と有料版がある

Font Awesomeは、
無料版と有料版がある。

無料版有料版
1,609個のアイコン7,865個のアイコン
99ドル/1年
番号が変わることも

Font Awesomeは、
バージョンアップで
アイコンの番号が変わる時がある。

2020年12月4日現在(バージョンv5.15.1)

Font Awesomeは、
使う前に準備が必要。

<head> </head>
の間へ
下のコードを入れるを入れる。

2020年12月4日現在(バージョンv5.15.1)

<link href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet">
htmlとcssで入れ方が違う

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)
の話でした。

ありがとうございました。

タイトルとURLをコピーしました