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

準 備｜WebフォントのUnicodeの使い方

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

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

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

このページは、上の８つのカスタマイズ方法のうち、「1.1.3. Unicodeを使う （使い方１-3）」について説明しています。
他の方法については合せて、つぎのサイト「Web Design Leaves　Font Awesome 5 の基本的な使い方」を参照してください。
FontAwesome5のスタマイズ方法につては、多くのWebサイトで紹介されています。


 準 備

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

 Font Awesome 5 のダウンロード（下CSSファイルをCDNサイトからリンク使用する時は不要）

つぎのサイトから、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 CSSファイルファイルのインクルード（CSS) - Font Awesome 5 Freeフォント使用時

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">

 表示したいアイコンのUnicodeの取得（HTML)

表示したいアイコンのUnicodeは、Font Awesome 5のアイコン一覧ページより取得します。フリーで使用できるフォントは、下表のとおり Solid、BrandsおよびRegularの３つのスタイルがあります。

Unicodeの取得の仕方

  1. 下表の表示したいWebフォントアイコンのスタイルの値をクリックし、Font Awesome 5アイコン一覧を表示します
  2. アイコン一覧ページの右上の「Show Cheatsheet」ボタンをクリックし、Unicodeを表示します
  3. 表示したいWebフォントアイコンをFont Awesome 5アイコン一覧から探し出します
  4. そのアイコンをダブルクックして、そのアイコンのデータを表示します
  5. Unicodeコードをコピーして設定します。
    例えば、Unicodeコードが f42d のとき、頭に"&#x"を付け、末尾に";"を付けて &#xf42d; を記述します。
項番スタイル（注）使用方法 左の表示アイコン名
1 Solid<p class="fas">文章の中に &#xf002;記述</p>

文章の中に  記述

search
2 Brands<p class="fab">文章の中に &#xf42d;記述</p>

文章の中に  記述

amazon pay
3 Regular <p class="far">文章の中に &#xf1c1;記述</p>

文章の中に  記述

PDF
（注）スタイルの項目は、Font Awesome 5の「アイコン一覧」ページへリンクしています。
    ・Regularの場合、「アイコン一覧」で、Proアイコンはグレイ表示になっていますがFreeで使用できます。
    ・Solidの場合、「アイコン一覧」で、グレイ表示のProアイコンは使用できません。
    ・Brandsの場合、Pro,Freeの区別がなく、すべて使用できます。

 WebフォントのUnicodeの使い方

 基本的な使用例

Font Awesome 5のアイコンをスタイルごとに並べて表示しました。

Solid


ambulance
f0f9

phone
f095

bicycle
f206

search
f002

arrow-left
f060

arrow-right
f061

angle-left
f104

angle-right
f105

align-center
f037

archive
f187

envelope
f0e0

comment-dots
f4ad

heart
f004

download
f019

upload
f093

Brands


amazon
f270

twitter
f099

instagram
f16d

cc-amazon-pay
f42d

cc-jcb
f24b

facebook-square
f082

nternet-explorer
f26b

itunes
f3b4

edge
f282

google
f1a0

youtube
f167

Line
f3c0

Regular


caret-square-down
f150

arrow-alt-circle-left
f359

arrow-alt-circle-right
f35a

caret-square-up
f151

bell
f0f3

address-card
f2bb

credit-card
f09d

copyright
f1f9

file-pdf
f1c1


<p><b>Solid</b></p>
<DIV class=boxContainer>
<div class=box><i class="fas unicd">&#xf0f9;</i><br>ambulance<br>f0f9</div>
<div class=box><i class="fas unicd">&#xf095;</i><br>phone<br>f095</div>
<div class=box><i class="fas unicd">&#xf206;</i><br>bicycle<br>f206</div>
<div class=box><i class="fas unicd">&#xf002;</i><br>search<br>f002</div>
<div class=box><i class="fas unicd">&#xf060;</i><br>arrow-left<br>f060</div>
<div class=box><i class="fas unicd">&#xf061;</i><br>arrow-right<br>f061</div>
<div class=box><i class="fas unicd">&#xf104;</i><br>angle-left<br>f104</div>
<div class=box><i class="fas unicd">&#xf105;</i><br>angle-right<br>f105</div>
<div class=box><i class="fas unicd">&#xf037;</i><br>align-center<br>f037</div>
<div class=box><i class="fas unicd">&#xf187;</i><br>archive<br>f187</div>
<div class=box><i class="fas unicd">&#xf0e0;</i><br>envelope<br>f0e0</div>
<div class=box><i class="fas unicd">&#xf4ad;</i><br>comment-dots<br>f4ad</div>
<div class=box><i class="fas unicd">&#xf004;</i><br>heart<br>f004</div>
<div class=box><i class="fas unicd">&#xf019;</i><br>download<br>f019</div>
<div class=box><i class="fas unicd">&#xf093;</i><br>upload<br>f093</div>
</DIV>
<p><b>Brands</b></p>
<DIV class=boxContainer>
<div class=box><i class="fab unicdb">&#xf270;</i><br>amazon<br>f270</div>
<div class=box><i class="fab unicdb">&#xf099;</i><br>twitter<br>f099</div>
<div class=box><i class="fab unicdb">&#xf16d;</i><br>instagram<br>f16d</div>
<div class=box><i class="fab unicdb">&#xf42d;</i><br>cc-amazon-pay<br>f42d</div>
<div class=box><i class="fab unicdb">&#xf24b;</i><br>cc-jcb<br>f24b</div>
<div class=box><i class="fab unicdb">&#xf082;</i><br>facebook-square<br>f082</div>
<div class=box><i class="fab unicdb">&#xf26b;</i><br>nternet-explorer<br>f26b</div>
<div class=box><i class="fab unicdb">&#xf3b4;</i><br>itunes<br>f3b4</div>
<div class=box><i class="fab unicdb">&#xf282;</i><br>edge<br>f282</div>
<div class=box><i class="fab unicdb">&#xf1a0;</i><br>google<br>f1a0</div>
<div class=box><i class="fab unicdb">&#xf167;</i><br>youtube<br>f167</div>
</DIV>

<p><b>Regular</b> </p>
<DIV class=boxContainer>
<div class=box><i class="far unicdr">&#xf150;</i><br>caret-square-down<br>f150</div>
<div class=box><i class="far unicdr">&#xf359;</i><br>arrow-alt-circle-left<br>f359</div>
<div class=box><i class="far unicdr">&#xf35a;</i><br>arrow-alt-circle-right<br>f35a</div>
<div class=box><i class="far unicdr">&#xf151;</i><br>caret-square-up<br>f151</div>
<div class=box><i class="far unicdr">&#xf0f3;</i><br>bell<br>f0f3</div>
<div class=box><i class="far unicdr">&#xf2bb;</i><br>address-card<br>f2bb</div>
<div class=box><i class="far unicdr">&#xf09d;</i><br>credit-card<br>f09d</div>
<div class=box><i class="far unicdr">&#xf1f9;</i><br>copyright<br>f1f9</div>
<div class=box><i class="far unicdr">&#xf1c1;</i><br>file-pdf<br>f1c1</div>
</DIV>

<style>
/* 以下DIV横並び用 */
.box{
  float: left;
  padding:3px;
}

.boxContainer{
  overflow: hidden;
}

.clearfix:after {
  content:" ";
  display: block;
  clear:both;
}

/* 以下Unicode用 */
.unicd{
  color:brown;
  font-size:30px;
 }

.unicdb{
  color:blue;
  font-size:30px;
 }
.unicdr{
  color:green;
  font-size:30px;
 }

</style>

 応用例１ー検索ボタン

・検索ボタンデモ - Solidスタイルアイコン

・デモHTML

INPUTタグ内に、Solidの検索アイコンのUnicode(f002)を記述します。class名は、fasとします。 

<!DOCTYPE html>
<html>
<head>
<title>Webアイコン Fontawesome テキストの中にUnicodeで書き込む方法-検索ボタン</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css">
<style>
input[type="submit"]{
  width: 70px;
  height:25px;
  font-size:13px;
  color:#000000;
  padding: 0px;
}
</style>
</head>
<body>
<input type="submit" value="検索 &#xf002;" class="fas">
</body>
</html>

 応用例２ー文章の中の好きな場所にアイコンを表示する

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webアイコン Fontawesome5 テキストの中に書き込む方法-検索ボタン</title>
<!-- Fontawesome5 CSS -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css">

<style>
ul {
  font-size: ;
}
li {
  display: inline-block;
  font-size: 30px;
  padding-left: 5px;
  color: blue;
  cursor: pointer;
} 
.li1, .li4{
  color:#ff9900;
} 
.li2{
  color:#55acee;
}
.li3{
   color:#833ab4;
}
.li5{

}
.li6{
  color:#315096
}
.li7{
  color:#00c300
}
.li8{

}
</style>
</head>
<body>
<h3>テキスト内記述Webアイコン サンプル</h3>
<div style="width:600px;background:beige;padding:6px;font-size:13px;text-align:">
<p><b>家族と共に暮らし 故郷で働ける価値</b></p>
<ul class="fab"> <!-- Fontスタイル一括指定  -->
<li class=li2 title="Twitter">&#xf099;
<li class=li6 title="Facebook">&#xf082; 
<li class=li7 title="LINE">&#xf3c0; 
<li class=li3 title="Instagram">&#xf16d; 
<li class=li1 title="Amazon">&#xf270;
<li class=li4 title="Amazon Pay">&#xf42d; 
<li class=li5 title="JCB">&#xf24b; 
<li class="li8 fas" title="メール">&#xf0e0;
</ul>
<br>
働きながら、生まれ育った故郷で、家族と一緒に暮らしたい。<br>その夢を叶えた <i class="fab li1">&#xf270;</i> Amazonカスタマーサービス 佐野優音さん。祖父母や母を支えながら、
在宅でAmazonのカスタマーサービスの一員として働く佐野さんの働き方を<i class="fab" style="color:red">&#xf167;</i>動画でご紹介します。<br><br>
<iframe width="560" height="315" src="https://www.youtube.com/embed/gCwxnyj7K1E" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Amazon Story：家族と共に暮らし故郷で働ける価値 https://blog.aboutamazon.jp/empowerment_as_yunesano   <i class="fas" style="color:green;font-size:30px;cursor: pointer" title="コメント">&#xf4ad;</i>
</div>

</body>
</html>

準 備｜WebフォントのUnicodeの使い方

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

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

HOME
 最終更新日：2020.5.15（初版） 		メール：  掲示板
_