attr (data-Symbol) Eigenschaft Verwendung von Unicode anzuzeigen, bevor Element

Question

wir ein Beispiel mit einfachen HTML-Code wie folgt zeigen:

<div data-icon="\25B6">Title</div> 

ich dieses Element möchte ein Präfix Symbol durch es Daten Attribut gesetzt haben (Daten-Symbol), damit ich CSS-Datei wie folgt:

div:before { 
    content: attr(data-icon); 
} 

Meine gewünschte Ausgabe dieses Beispiel würde wie folgt aussehen:

▶Title 

Statt der gewünschten Ausgabe alles, was ich bekommen kann, ist dies:

\25B6Title 

Also meine Frage ist: Was mache ich falsch/was bin ich dabei?

JSFiddle Beispiel: http://jsfiddle.net/Lqgr9zv6/

Answer 1

CSS-Escape-Sequenzen nur innerhalb CSS Strings arbeiten. Wenn Sie eine CSS-Escape-Sequenz von einem HTML-Attribut (d. H. Außerhalb von CSS) ausführen, wird sie wörtlich gelesen und nicht als Teil einer CSS-Zeichenfolge interpretiert.

Wenn Sie das Zeichen innerhalb eines HTML-Attributs codieren möchten, müssen Sie es als HTML-Entität codieren. Dies wird von CSS als das entsprechende Unicode-Zeichen gesehen.

<div data-icon="&#x25B6;">Title</div> 

Alternativ können Sie einfach use the Unicode character itself: Da dies eine hexadezimale Escape-Sequenz ist, können Sie es like so transkribieren

<div data-icon="▶">Title</div> 

Answer 2

können Sie uss css Dreieck für Pfeil. http://jsfiddle.net/Lqgr9zv6/3/

div{ 
position:relative; 
text-indent:12px; 
} 


div:before { 
content:''; 
position:absolute; 
left:0; 
top:0; 
bottom:0; 
margin:auto; 
width: 0; 
height: 0; 
border-style: solid; 
border-width: 5px 0 5px 10px; 
border-color: transparent transparent transparent #000; 
}