CODEPREP | Font Awesomeのメモです。

---

アイコンを重ねる

• fa-stackを親要素に追加して、子要素に重ねるアイコンを配置する
• 外側に見せたいアイコン: fa-stack-2x(少し大きめのサイズ)
• 内側に見せたいアイコン: fa-stack-1x(通常サイズ)

• 子要素は配置した順番に上から背面に置かれる

  • e.g. 最前面に表示したいアイコンを一番下に配置する必要がある

アイコンと文字の間隔を調整する

• fa-fwというユーティリティクラスを指定する

Font Awesomeをフォントとして使う

• Font Awesomeは、FontAwesomeという名前のフォントとして提供されているため、CSSのフォント関連のプロパティを使うことで利用できる

• CSSでリストのアイコンを別の文字に置き換える方法として、疑似要素にcontentプロパティを使って別の文字を割り当てるテクニックがよく使われる

  • contentプロパティには、FontAwesomeのアイコンをUnicodeで指定する