Font Awesome でアイコンやロゴを表示させる手順

Font Awesome

Sponsor

Font Awesome とは
Font Awesome4
Font Awesome5
Font Awesome6
Font Awesome のアイコンを利用できるようにする
Font Awesome のアイコンを表示する
Font Awesome のアイコンを大きく表示する方法
Font Awesome のアイコンの色を変更する
リストのデザインにFont Awesomeを利用する

Font Awesome とは

Font Awesome を利用すると、ウェブサイトで表示できるアイコンやソーシャルロゴを取得できます。アイコンやソーシャルロゴは無料のものと有料のものがあります。無料のものは登録の必要もなく、「クラス名」を記述するだけで表示できます。

Font Awesome4	無料
Font Awesome5	無料と有料がある

Font Awesome5の有料にはPROを記載があります。

Font Awesome 5の無料の一部

FREE（無料）をクリック

Font Awesome 4の無料の一部（payとshopで検索）

クラス名

Font Awesome5は無料では2種類のスタイルが選べ、クラス名が異なります。

Font Awesome4	fa fa-check-square-o
Font Awesome5	fas fa-check-square またはfar fa-check-square

Sponsor

Font Awesome4

下記リンクでFont Awesome4のフォントを選べます。

Font Awesome Icons

Font Awesome, the iconic font and CSS framework

Font Awesome4の例 check-squareの場合

ユニコードとHTMLコード

Font Awesome4の場合

HTMLは
クラス名は fa fa-check-square-o
Unicode（ユニコード）は f14a

Font Awesome5

Find Icons with the Perfect Look & Feel | Font Awesome

Used by millions of designers, devs, & content creators. Open-source. Always free. Check out the all-new Sharp Solid ico...

Font Awesome5の例 map marker

HTMLコピーまたはUnicode（ユニコード）をクリックします。

Font Awesome5の場合

HTMLは
クラス名は far fa-check-squaret
Unicode（ユニコード）は f0da

Font Awesome6

Font Awesome6 のベータ―版もあり、無料のアイコンもあります。

Font Awesome

The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free...

Internet Explorer は 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>

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;
}