Font Awesome - よく利用するアイコンだけまとめ

fontawesome.com

よく利用するアイコン一覧

コピペでどうぞ~（ちなみにfaはver.4、fasはver.5~です。ここでは基本fas以降で掲載してます）

アイコン	コード	説明
	<i class="fas fa-external-link"></i>	外部リンク
	<i class="fa-solid fa-list"></i>	リスト
	<i class="fa-solid fa-expand"></i>	拡大・拡張
	<i class="fa-brands fa-youtube"></i>	Youtube
	<i class="fas fa-copy"></i>	コピー
	<i class="fas fa-clipboard"></i>	貼り付け
	<i class="fas fa-save"></i>	保存
	<i class="fa-solid fa-music"></i>	音符
	<i class="fas fa-bookmark"></i>	ブックマーク
	<i class="fas fa-tag"></i>	タグ
	<i class="fas fa-cog"></i>	歯車
	<i class="fas fa-envelope"></i>	メール
	<i class="fas fa-comment"></i>	コメント
	<i class="fas fa-phone"></i>	電話
	<i class="fas fa-mobile"></i>	モバイル
	<i class="fas fa-tablet"></i>	タブレット
	<i class="fas fa-laptop"></i>	ラップトップ
	<i class="fas fa-home"></i>	ホーム
	<i class="fas fa-line-chart"></i>	ラインチャート
	<i class="fas fa-bar-chart"></i>	バーグラフ
	<i class="fas fa-sitemap"></i>	サイトマップ
	<i class="fas fa-info-circle"></i>	情報サークル
	<i class="fas fa-calendar"></i>	カレンダー
	<i class="fas fa-wrench"></i>	レンチ
	<i class="fas fa-graduation-cap"></i>	卒業帽子
	<i class="fas fa-heart"></i>	ハート
	<i class="fas fa-star"></i>	スター

矢印系

アイコン	コード	説明
	<i class="fas fa-arrow-up"></i>	上向き矢印
	<i class="fas fa-arrow-right"></i>	右向き矢印
	<i class="fas fa-arrow-down"></i>	下向き矢印
	<i class="fas fa-arrow-left"></i>	左向き矢印
	<i class="fas fa-arrow-circle-up"></i>	上向き矢印（円形）
	<i class="fas fa-arrow-circle-right"></i>	右向き矢印（円形）
	<i class="fas fa-arrow-circle-down"></i>	下向き矢印（円形）
	<i class="fas fa-arrow-circle-left"></i>	左向き矢印（円形）
	<i class="fas fa-chevron-up"></i>	上向き矢印（矢じり）
	<i class="fas fa-chevron-right"></i>	右向き矢印（矢じり）
	<i class="fas fa-chevron-down"></i>	下向き矢印（矢じり）
	<i class="fas fa-chevron-left"></i>	左向き矢印（矢じり）
	<i class="fas fa-chevron-circle-up"></i>	上向き矢印（円形、矢じり）
	<i class="fas fa-chevron-circle-right"></i>	右向き矢印（円形、矢じり）
	<i class="fas fa-chevron-circle-down"></i>	下向き矢印（円形、矢じり）
	<i class="fas fa-chevron-circle-left"></i>	左向き矢印（円形、矢じり）
	<i class="fas fa-angle-up"></i>	上向き角度
	<i class="fas fa-angle-right"></i>	右向き角度
	<i class="fas fa-angle-down"></i>	下向き角度
	<i class="fas fa-angle-left"></i>	左向き角度
	<i class="fas fa-angle-double-up"></i>	上向き角度（二重）
	<i class="fas fa-angle-double-right"></i>	右向き角度（二重）
	<i class="fas fa-angle-double-down"></i>	下向き角度（二重）
	<i class="fas fa-angle-double-left"></i>	左向き角度（二重）
	<i class="fas fa-caret-up"></i>	上向きキャレット
	<i class="fas fa-caret-right"></i>	右向きキャレット
	<i class="fas fa-caret-down"></i>	下向きキャレット
	<i class="fas fa-caret-left"></i>	左向きキャレット
	<i class="fas fa-caret-square-up"></i>	上向きキャレット（四角）
	<i class="fas fa-caret-square-right"></i>	右向きキャレット（四角）

コード系

	コード	説明
	<i class="fa-solid fa-code"></i>Copy	ソースコード
	<i class="fa-brands fa-html5 fa-lg" style="color: #f06429;"></i>Copy	HTML
	<i class="fa-brands fa-css3-alt fa-lg" style="color: #2864f0;"></i>Copy	CSS
	<i class="fa-brands fa-square-js fa-lg" style="color: #efd81d;"></i>Copy	JavaScript

数字

アイコン	コード	説明
	<h3><i class="fa-solid fa-0 fa-xs"></i></h3>	番号（見出し）
	<i class="fa-solid fa-1 fa-xs"></i>	番号（リスト）
	<i class="fa-solid fa-9 fa-xs"></i>	※0~9まで

/* 目次用 */
.table-of-contents i.fa-solid.fa-xs {
    position: relative;
    top: 2px;
    color: salmon;
}
/* 見出し用 */
h3 i.fa-solid.fa-xs {
    position: relative;
    top: 2px;
    color: cornflowerblue;
}

人系

アイコン	コード	説明
	<i class="fas fa-user"></i>	ユーザー
	<i class="fas fa-user-circle"></i>	ユーザーサークル
	<i class="fas fa-male"></i>	男性
	<i class="fas fa-female"></i>	女性
	<i class="fas fa-child"></i>	子供
	<i class="fas fa-smile"></i>	スマイル
	<i class="fas fa-thumbs-up"></i>	サムズアップ
	<i class="fas fa-thumbs-down"></i>	サムズダウン

チェック系

アイコン	コード	説明
	<i class="fas fa-check"></i>	チェック
	<i class="fas fa-check-circle"></i>	チェック（円形）
	<i class="fas fa-check-square"></i>	チェック（四角）

！？系

アイコン	コード	説明
	<i class="fas fa-exclamation"></i>	注意
	<i class="fas fa-exclamation-circle"></i>	注意（円形）
	<i class="fas fa-question"></i>	質問
	<i class="fas fa-question-circle"></i>	質問（円形）
	<i class="fas fa-exclamation-triangle"></i>	注意（三角）

番外編（はてな）

アイコン	コード	説明
	<i class="blogicon-hatenablog"></i>	はてなブログ
	<i class="blogicon-fotolife"></i>	フォトライフ

---

CDN

<link rel="font-awesome-animation" href="https://cdn.jsdelivr.net/npm/font-awesome-animation@1.1.1/css/font-awesome-animation.min.css">
<link id="font-awesome6" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">

---