[CSS] attr(data) で fontawesome を使う

NO IMAGE

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

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

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

<button id="TestBtn1">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>

参考URL

HTML/CSSカテゴリの最新記事