Font Awesome とは
Font Awesome を利用すると、ウェブサイトで表示できるアイコンやソーシャルロゴを取得できます。アイコンやソーシャルロゴは無料のものと有料のものがあります。無料のものは登録の必要もなく、「クラス名」を記述するだけで表示できます。
| Font Awesome4 | 無料 |
| Font Awesome5 | 無料と有料がある |
Font Awesome5の有料にはPROを記載があります。
Font Awesome5の無料の一部
FREE（無料）をクリック
Font Awesome4の無料の一部（payとshopで検索）
クラス名
Font Awesome5は無料では2種類のスタイルが選べ、クラス名が異なります。
| Font Awesome4 | fa fa-check-square-o |
| Font Awesome5 | fas fa-check-square またはfar fa-check-square |
Font Awesome4
下記リンクでFont Awesome4のフォントを選べます。
Font Awesome4の例 check-squareの場合
ユニコードとHTMLコード
Font Awesome4の場合
- HTMLは<i class=”fa fa-check-square-o“></i>
- クラス名は fa fa-check-square-o
- Unicode（ユニコード）は f14a
Font Awesome5
Font Awesome5の例 map marker
HTMLコピーまたはUnicode（ユニコード）をクリックします。
Font Awesome5の場合
- HTMLは <i class=”far fa-check-square“></i>
- クラス名は far fa-check-squaret
- Unicode（ユニコード）は f0da
Font Awesome6
Font Awesome6 のベータ―版もあり、無料のアイコンもあります。
Font Awesome のアイコンを利用できるようにする
headタグ内に貼付け
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"><head>～</head>内に、上記コードを貼ります。
テーマ「cocoon」を利用している場合はcocoonの設定でFont Awesomeの利用を選択できます。
テーマcocoonの場合
cocoonの設定でFont Awesomeの利用を選択できます。
- cocoonの設定
- 全体
- サイトアイコンフォント
- 「Font Awesome 4」または「Font Awesome 5」を選択する
Font Awesome のアイコンを表示する
コピーしたHTMLコードで表示できます。
<i class="far fa-check-square"></i>例 上記コードで表示した場合
例 アイコンを2倍にした場合
Font Awesome のアイコンを大きく表示する方法
クラス名にfa-lgを追加すると、1.33倍になります。
| <p><i class=”far fa-check-square fa-lg“></i></p> <p><i class=”far fa-check-square fa-2x“></i></p> |
ソース
<p><i class="far fa-check-square fa-lg"></i></p>
<p><i class="far fa-check-square fa-2x"></i></p>| fa-lg | 1.33倍 |
| fa-2x | 2倍 |
| fa-3x | 3倍 |
Font Awesome のアイコンの色を変更する
CSS（クラスで色を指定する）
.blue {color: #88ccef}HTML（CSSで指定したクラスを追加する）
<i class="far fa-check-square blue"></i>リストのデザインにFont Awesomeを利用する
Unicode（ユニコード）をコピーして貼ります。
Font Awesome 5 の場合
| ul li { list-style:none; } ul li::before { font-family: ‘Font Awesome 5 Free’; content: ‘\f14a‘; ユニコード（Unicode）を貼る color: #88ccef; 色を指定する font-weight: 900; 太さを100～900で指定する（無料版は400または900） margin-right: 0.5em; } |
コピー用
ul li {
list-style:none;
}
ul li::before {
font-family: 'Font Awesome 5 Free';
content: '\f14a'; /*コード*/
color: #88ccef; /*色の変更*/
font-weight: 900; /*太さ*/
margin-right: 0.5em;
}クラス「.entry-content」のみのリストを変更する場合
コピー用
.entry-content ul li {
list-style:none;
}
.entry-content ul li::before {
font-family: 'Font Awesome 5 Free';
content: '\f14a'; /*コード*/
color: #88ccef; /*色の変更*/
font-weight: 900; /*太さ*/
margin-right: 0.5em;
}リストはメニューなどの表示にも利用されているので、記事の中のリストだけを変更する場合は、クラス「.entry-content」を記述します。
Font Awesome 4 の場合
Font Awesome 4 と Font Awesome 5 は「font-family」が違います。
| Font Awesome 4 | FontAwesome |
| Font Awesome 4 | Font Awesome 5 Free |
| ul li { list-style:none; } ul li::before { font-family: FontAwesome; content: “\f14a“; ユニコード（Unicode）を貼る color: #88ccef; 色を指定する font-weight: 900; 太さを100～900で指定する margin-right: 0.5em; } |
コピー用
ul li {
list-style:none;
}
ul li::before {
font-family: FontAwesome;
content: "\f14a"; /*コード*/
color: #88ccef; /*色の変更*/
font-weight: 900; /*太さ*/
margin-right: 0.5em;
} 
