Font Awesome でアイコンやロゴを表示させる手順/Font Awesome4と5の違い

Font Awesome 5
webサイト制作

Font Awesome とは

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

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

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

Font Awesome5の無料の一部

FREE(無料)をクリック

Font Awesome 5
Font Awesome 5
Font Awesome 5
Font Awesome 5

Font Awesome4の無料の一部(payとshopで検索)

Font Awesome 4
Font Awesome 4
Font Awesome 4
Font Awesome 4

クラス名

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

Font Awesome4fa fa-check-square-o
Font Awesome5fas fa-check-square またはfar fa-check-square
Font Awesome
SPONSOR

Font Awesome4

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

Font Awesome Icons
Font Awesome, the ic...

Font Awesome4の例 check-squareの場合

Font Awesome 4
Font Awesome 4

ユニコードとHTMLコード

Font Awesome 4
Font Awesome 4

Font Awesome4の場合

  • HTMLは<i class=”fa fa-check-square-o“></i>
  • クラス名は fa fa-check-square-o
  • Unicode(ユニコード)は f14a

Font Awesome5

Font Awesome
The world’s most pop...

Font Awesome5の例 map marker

Font Awesome 5
Font Awesome 5

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

Font Awesome5の場合

  • HTMLは <i class=”far fa-check-square“></i>
  • クラス名は far fa-check-squaret
  • Unicode(ユニコード)は f0da

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の利用を選択できます。

  1. cocoonの設定
  2. 全体
  3. サイトアイコンフォント
  4. 「Font Awesome 4」または「Font Awesome 5」を選択する
Font Awesome
Font Awesome

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-lg1.33倍
fa-2x2倍
fa-3x3倍

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で指定する
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 4FontAwesome
Font Awesome 4Font 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;
} 
SPONSOR
SPONSOR
webNote / WPとゲーム
タイトルとURLをコピーしました