折り畳みのサンプル
「HTML」「CSS」「JS」の各タブを押すとコードが記載されているので、それをコピーしてお使い下さい。
その他の使用例
アコーディオンの切替でFont Awesome 5のアイコンを使用
WebフォントCSSを使用する場合
See the Pen Bootstrap4 accodion with Font Awesome 5 CSS by cccabinet (@cccabinet) on CodePen.
【補足】
- CSSファイルの設定は、
<head>～</head>内に行うこと（ここではResourcesにv5の最新版を設定している）。 font-familyは、アイコンがRegular(.far)とSolid(.fas)の場合Font Awesome 5 Free、Brand(.fab)の場合Font Awesome 5 Brandsにする。font-weightは、アイコンがRegular(.far)の場合400、Solid(.fas)の場合900にする（Brand(.fab)の場合は不要）。contentに記載する各アイコンのUnicodeは、Font Awesome 5のチャートシートにある各アイコンの右側の欄に記載（頭に\が必要）。
JavaScriptによるSVGを使用する場合 Font Awesome v5.1.0設定変更
See the Pen Bootstrap4 accodion with Font Awesome 5 JS by cccabinet (@cccabinet) on CodePen.
【補足】
- JavaScriptファイルの設定は、
<head>～</head>内に行うこと（ここでは便宜上HTMLにv5の最新版を記載している）。 - 【Font Awesome v5.1.0～】
<script defer ...>内（JavaScriptファイルの設定）にdata-search-pseudo-elements属性を追加すること。※v5.0.xでのFontAwesomeConfigの設定は不要に。 font-familyは、アイコンがRegular(.far)の場合Font Awesome 5 Regular、Solid(.fas)の場合Font Awesome 5 Solid、Brand(.fab)の場合Font Awesome 5 Brandsにする。contentに記載する各アイコンのUnicodeは、Font Awesome 5のチャートシートにある各アイコンの右側の欄に記載（頭に\が必要）。marginやfont-sizeなどフォント本体以外の設定をする場合は、::beforeや::afterではなく、.svg-inline--fa[data-fa-pseudo-element]に設定すること。
Font Awesome 5のSVGでボタンによる開閉 Font Awesome v5.0.6設定変更
See the Pen Bootstrap4 Button collapse with Font Awesome 5 by cccabinet (@cccabinet) on CodePen.
【補足】
- JavaScriptファイルの設定は、
<head>～</head>内に行うこと（ここでは便宜上HTMLにv5の最新版を記載している）。