メインコンテンツへスキップ

折り畳みのサンプル

「HTML」「CSS」「JS」の各タブを押すとコードが記載されているので、それをコピーしてお使い下さい。

その他の使用例

アコーディオンの切替でFont Awesome 5のアイコンを使用

WebフォントCSSを使用する場合
【補足】
  • CSSファイルの設定は、<head></head> 内に行うこと(ここでは便宜上 HTML に記載している)。
  • 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設定変更
【補足】
  • JavaScriptファイルの設定は、<head></head> 内に行うこと(ここでは便宜上 HTML に記載している)。
  • 【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のチャートシートにある各アイコンの右側の欄に記載(頭に\が必要)。
  • marginfont-size などフォント本体以外の設定をする場合は、::before::after ではなく、.svg-inline--fa[data-fa-pseudo-element] に設定すること。

Font Awesome 5のSVGでボタンによる開閉 Font Awesome v5.0.6設定変更

【補足】
  • JavaScriptファイルの設定は、<head></head> 内に行うこと(ここでは便宜上 HTML に記載している)。