attr（）で:: before擬似要素内にFontAwesomeアイコンを使用

Question

attr()の::before疑似要素の中にFontAwesomeアイコンを挿入しようとしています。

：それを埋め込むための通常の方法がうまく動作しながら、

<div data-background-icon="\f086"></div> 

div::before { 
    content: attr(data-background-icon); 
    font-family: "FontAwesome"; 
} 

https://jsfiddle.net/grutcop8/

は、それが動作しない：元のコードはより複雑であるが、これはあなたに私が何をしたいのアイデアを与えるだろう

div::before { 
    content: "\f086"; 
    font-family: "FontAwesome"; 
} 

私には何か不足していますか？

Answer 1

ユニコードで試してください

CSSエスケープシーケンスはCSS文字列内でのみ機能します。 HTML属性（CSS外）からCSSエスケープシーケンスを取得すると、それは文字通り読み取られ、CSS文字列の一部として解釈されることはありません。

HTML属性内で文字をエンコードするには、 をHTMLエンティティとしてエンコードする必要があります。

font-Awesomeアイコンコードの前に"&#x"を追加する必要があります。あなたが/f086を使用する場合、すなわち、その後、ここからUnicodeを得る代わりに

を&#xf086を書く - https://fortawesome.github.io/Font-Awesome/cheatsheet/

div:before { 
 
    content: attr(data-background-icon); 
 
    font-family: "FontAwesome"; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div data-background-icon='&#xf086;'></div>

Answer 2

CSSは、エスケープシーケンスとして文字列ではなくとして\f086を読み込みます。この修正は、HTML属性にコピー＆ペーストアイコンcontent: '\f086';または直接のようなコンテンツの属性内に直接それを使用するかである（あなたがUTF-8としてファイルを保存してください）

HTML：

<div data-background-icon=""></div> <!-- this is the bluetooth icon copied from fontawesome --> 

CSS：

HTML：：

div::before { 
    content: attr(data-background-icon); 
    font-family: "FontAwesome"; 
} 

OR HTMLエンティティを利用します

<div data-background-icon="&#xf086;"></div> 

CSS：

div::before { 
    content: attr(data-background-icon); 
    font-family: "FontAwesome"; 
} 

フィドル：データへhttps://jsfiddle.net/76v9e2ur/1/