Font Awesome 5 の使い方 - Web絵文字フォントアイコンをttfファイルを使い表示する
Awesomeのttfをインストールし、CSSの疑似要素(::before/::after)を使う

準 備｜Font Awesome 5 の基本的な使用例｜Font Awesome 5 の応用例
サルワカサイトの「CSSで作る！魅力的な引用デザインのサンプル30（blockquote）」カスタマイズ

Font Awesome はバージョンが５になって、つぎの２つの方法で使用できるようになっています。

２つの使用方法についてはつぎのとおり、５つのカスタマイズ方法があります。

  1. CSSで読み込む - 今までと同じ Web フォントとして使う方法（Using Web Fonts with CSS）
    1. CDNを使う（使い方１）
      1. 規定のclass名を使う（使い方１-1）
      2. ttfをインストールし、CSSの疑似要素(::before/::after)を使う（使い方１-2）
    2. サーバーに Font AwesomeのCSSファイルを配置する（使い方２）
  2. JavaScriptで読み込む - SVG と JavaScript で使う方法（Using SVG with JavaScript）
    1. CDNを利用する（使い方３）
    2. Font AwesomeのJSファイルをダウンロードしてサーバーに配置する（使い方４）

このページは、上の５つのカスタマイズ方法のうち、「1.1.2. ttfをインストールし、CSSの疑似要素(::before/::after)を使う （使い方１-2）」について説明しています。 合せて、つぎのサイト「Web Design Leaves　Font Awesome 5 の基本的な使い方」を参照してください。
他のカスタマイズ方法につては、多くのWebサイトで紹介されています。


 準 備

つぎのような準備があります。

 Font Awesome 5 のダウンロード

つぎのサイトから、Font Awesome 5 フリー版（Version 5.12.0 Download Font Awesome Free for the Web）をダウンロードします。
https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

ダウンロードボタン
fontawesome-free-5.12.0-web.zip (2020年1月2日現在)

 Font Awesome 5フォントttfファイルのインストール

ダウンロードしたfontawesome-free-5.12.0-web.zip(ファイル名は2020年1月2日現在)ファイルを解凍し、webfontsフォルダ内の３つのttfファイルをインストールします。


【インストール方法】



つぎに、インストール結果をまとめました。

No.ダウンロードttfファイル名インストール先フォルダ
C:/Windows/Fonts/内のファイル名		CSSのfont-familyの値（フォント名）備考
1fa-brands-400.ttfFont Awesome 5 Brands 標準Font Awesome 5 Brands (注1）
2fa-regular-400.ttfFont Awesome 5 FreeFont Awesome 5 Free
3fa-solid-900.ttf非表示Font Awesome 5 Free (注2）
注記（注1）Brandsには、Free を付けない
（注2）solidを付けない。font-weight: 900; - 2021.5.10訂正

 Font Awesome 5 CSSファイルファイルのインクルード（CSS) - Font Awesome 5 Freeフォント使用時
    （PCローカル動作の場合不要）

Font Awesome 5 Freeフォントを使用する場合は、Font Awesome 5 CSSファイルを、<head>タグ内に、つぎのサイトを参照しCDNのall.cssまたはall.min.cssのURLをコピーしインクルードします。 https://cdnjs.com/libraries/font-awesome
Font Awesome 5 BrandsまたはFont Awesome 5 Solidを使用する場合は、CSSファイルは不要です。 

<!-- Font Awesome 5 CSSファイル CDN -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet">

 Font Awesome 5 CSSの疑似要素(::before/::after)の使い方（HTML/CSS)

ttfファイルを使う場合、CSSの::before(::after)擬似要素で、HTMLタグ要素の直前（直後）にWebフォントアイコンを挿入します。
挿入内容Webフォントアイコンはcontentプロパティで指定します。
ここの例は、blockquoteタグ領域の直前・直後に、Font Awesome 5 Free Regularフォントアイコンを表示します。 

blockquote::before{
    content: "\f10d";   /* quote-leftアイコン */
    font-family: "Font Awesome 5 Free"; /* Font Awesome 5 Regularフォント */ 
    font-weight: 900;   /* Font Awesome 5 Freeのとき、Fontウェイトは900 */
}
blockquote::after{
    content: "\f10e";  /* quote-rightアイコン */
    font-family: "Font Awesome 5 Free"; /* Font Awesome 5 Regularフォント */ 
    font-weight: 900;
}

 Font Awesome 5の基本的な使い方

 Font Awesome 5 Free Solidの使い方

３つのSolidアイコンを、順にliタグ要素の先頭、直後、先頭に、横並びに表示する例です。 

/* Font Awesome 5 Free Solidアイコン */

#ul_solid {
  font-family: "Font Awesome 5 Free"; /* Font Awesome 5 Free Solid フォント */
  font-weight: 900;
  margin-right: 5px;
  list-style: none;   /* liタグのリスト先頭にマーカーを表示しない */
  /* li（子要素）の横並び ブラウザ対応 
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  */
  display: flex;  /* li（子要素）の横並び */
}
.baby::before {
  content: "\f77c";  /* babyアイコン */
  color: red;        /* アイコンの色 */
  font-size: 30px;   /* アイコンの大きさ */
}
.baby-carriage::after {
  content: "\f77d";  /* baby-carriageアイコン */
  color: #3b5998;
  font-size: 30px;
}
.bicycle::before {
  content: "\f206";  /* baby-carriageアイコン */
  color: green;
  font-size: 30px;
}

#ul_solid li {
  margin-right: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: .5rem
}

Font Awesome 5 Free Solid デモ

 Font Awesome 5 Brandsの使い方

３つのBrandsアイコン（twitter,facebook,instagram）を、順にliタグ要素の先頭、先頭、先頭に、横並びにSNSアイコンを表示する例です。 

/* Font Awesome 5 Brands アイコン */
#ul_brands {
  font-family: "Font Awesome 5 Brands";  /* Brandsアイコン ttfは、Free を付けない */
  margin-right: 5px;
  list-style: none;
  /* li（子要素）の横並び ブラウザ対応 
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  */
  display: flex;  /* li（子要素）の横並び */ 
}

.twitter{
   background: #00aced;  /* li領域の背景色 */
   color: #ffffff;       /* li領域の文字の色 */
}
.twitter::before {
  content: "\f099";  /* twitter アイコン */
  color: #ffffff;    /* twitter アイコンの色 */
}

.facebook {
  background: #3b5998;  /* li領域の背景色 */
  color: #ffffff;       /* li領域の文字の色 */
}
.facebook::before {
  content: "\f39e";     /* facebook-f アイコン */
  color: #3b5998;       /* facebook-f アイコンの色 */
  background: #ffffff;  /* facebook-f アイコンの背景色 */

}

.instagram::before {
  content: "\f16d";    /* instagram アイコン */
  color: #e1306c;      /* instagram アイコンの色 */
}

#ul_brands li {
  margin-right: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 3px;
}

Font Awesome 5 Brands デモ

 Font Awesome 5 Free(Regular)の使い方

３つのRegularアイコン（twitter,facebook,instagram）を、順にdivタグ要素の先頭、直後、先頭に、横並びに表示する例です。
Regularアイコンの場合、Font Awesome 5のCSSファイルを使用します（「HTML全体まとめ」タブ内参照）。 

/* Font Awesome 5 Free Regularフォント */

#div_regular {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 5px;
  padding: 5px;
  /* div（子要素）の横並び ブラウザ対応 
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  */
  display: flex;  /* div（子要素）の横並び */
}

.quote-left::before {
  content: "\f10d";  /* quote-left アイコン */
  color: green;      /* アイコンの色 */   
  font-size: 30px;   /* アイコンの大きさ */    
}

.quote-right::after {
  content: "\f10e";  /* quote-right アイコン */
  color: #3b5998;   
  font-size: 30px; 
}

.smile-wink::before {  
  content: "\f4da";  /* smile-wink アイコン */
  color: brown;   
  font-size: 30px; 
}

#div_regular div {
  margin-right: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 6px; 
}

Font Awesome 5 Regular デモ


 Font Awesome 5の応用例

ブログなどで引用文を書くときは、Bkockquoteなどの引用タグを使用しますが、Font Awesome 5の応用例として引用タグ（blockquote・p・citeタグ）の使い方を取り上げます。
通例、引用文はBlockquote要素内に、pタグで引用文、citeタグで引用元情報を記述し、引用記号（”）を直前または直後表示します。

・引用文記述例（引用記号（”）略） 

<blockquote>
 <p>ここの引用文・・・・</p>
 <cite>ここに引用元情報</cite>
</blockquoute>



/* 引用文 Blockquote, p, cite - Font Awesome 5 Free */

blockquote {
    position: relative;
    font-family: "Font Awesome 5 Free"; /* Font Awesome 5 Free Regularフォント */
    font-weight: 900;
    padding: 10px 20px;
    box-sizing: border-box;
    color: #4e4e4e;
    background: beige;
    width: 600px;
}

blockquote::before{
    display: inline-block;
    position: absolute;
    top: 7px;
    left: 10px;
    content: "\f10d";   /* quote-leftアイコン */
    font-style: italic; /* 斜体 */
    color: #dcdcdc;     /* quote-leftアイコンの色 */ 
    font-size: 45px;
    line-height: 1;
}

blockquote::after{
    display: inline-block;
    position: absolute;
    bottom: 5px;
    right: 15px;
    text-align: center;
    content: "\f10e";   /* quote-rightアイコン */
    font-style: italic; /* 斜体 */
    color: #dcdcdc;     /* quote-leftアイコンの色 */  
    font-size: 45px;
    line-height: 1;
}

blockquote p {
    position: relative;
    padding: 0;
    margin: 30px 10px;
    z-index: 3;
    line-height: 1.7;
}

blockquote cite {
    position: relative;
    z-index: 3;
    display: block;
    text-align: center;
    color: #888888;
    font-size: 0.9em;
    font-style: normal; /* 斜体 */
}

blockquote a {
   text-decoration: none;
}
blockquote a:hover {
   text-decoration: underline;
}

Font Awesome 5 応用例 引用文デモ



 CSSで作る！魅力的な引用デザインのサンプル30（blockquote）の v5バージョンアップ

あの有名なサルワカサイトの「CSSで作る！魅力的な引用デザインのサンプル30（blockquote）」の引用ボックスのCSSサンプル３０本ををFont Awesome 5にバージョンアップしてみました。
旧バージョンからFont Awesome 5へのバージョンアップは、つぎの２つの項目を変更します。

 Font Awesome 5にカスタマイズした「CSSで作る！魅力的な引用デザインのサンプル30（blockquote）」のデモ３０例


準 備｜Font Awesome 5 の基本的な使用例｜Font Awesome 5 の応用例
サルワカサイトの「CSSで作る！魅力的な引用デザインのサンプル30（blockquote）」カスタマイズ｜TOP

・関連リンク（ページ内）

Font Awesome 5 の使い方 - Web絵文字フォントアイコンをUnicodeを使い表示する   Unicodeを使うと、文章の中の好きな場所にアイコンを表示できる ≫

HOME
 最終更新日：2020.1.17（初版）
2021.5.10 		メール：  掲示板
アクセス解析 _