web-dev-qa-db-ja.com

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

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";
}

私が不足しているものは何ですか？

htmlcssfont-awesome
12
sdvnksv

Unicodeで試してください

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

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

font-Awesomeアイコンコードの前に"&#x"を追加する必要があります。つまり、/f086を使用する場合は、代わりに&#xf086と記述します

ここからユニコードを取得します- https://fortawesome.github.io/Font-Awesome/cheatsheet/

[〜＃〜] update [〜＃〜]

FontAwesome 5を使用している場合は、font-family: "FontAwesome";をfont-family: 'Font Awesome 5 Free';に変更します

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>
21
Jinu Kurian

CSSは\f086をエスケープシーケンスではなく文字列として読み取ります。修正方法は、content: '\f086';などのコンテンツ属性内で直接使用するか、HTML属性にアイコンを直接コピーして貼り付けることです（ファイルをUTF-8として保存してください）。

HTML：

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

CSS：

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

または、HTMLエンティティを使用します。

HTML：

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

CSS：

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

フィドル： https://jsfiddle.net/76v9e2ur/1/

1
mehulmpt