[CSS] Font Awesome を CSS 上から attr() で指定する方法

Font Awesome を CSS 上から attr() で指定する方法

例えばボタンにフォントを付けるために次のようなコードを書けます。

<style>
  #TestBtn1:before {
    font-family: FontAwesome;
    content: '\f06e';
  }
</style>

<button id="TestBtn1">button</button>

例

button

attr() を 使って書き直す

CSS で attr() を使うことで、htmlの属性値を参照できます。content で表示させるフォントを指定できます。

ただし、Unicodeの指定ではなく このチートシートに書かれてあるHTMLエンティティ？を使用する必要があります。

<style>
  #TestBtn2:before {
    font-family: FontAwesome;
    content: attr(data-fa);
  }
</style>
<button id="TestBtn2" data-fa="&#xf06e;">button</button>

例

button

参考URL

• CSS attr() – Set FontAwesome glyph dinamycally inside before/after
• How to use data attributes with Font Awesome?
• Cheatsheet