Korzystanie attr (dane-icon) właściwość, aby wyświetlić unicode przed elementem

Question

Pozwala wykazać przykład z prostego kodu HTML jak poniżej:

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

chciałbym ten element, aby mieć ikonę prefiks ustawiony przez to jest atrybut danych (danych ikona) tak ustawić plik CSS tak:

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

My pożądane wyjście z tego przykładu będzie wyglądać następująco:

▶Title 

Zamiast pożądanym wyjściem mogę dostać to:

\25B6Title 

Więc moje pytanie brzmi: co robię źle/Czego mi brakuje?

JSFiddle przykład: http://jsfiddle.net/Lqgr9zv6/

Answer 1

sekwencje escape CSS działa tylko w obrębie ciągów CSS. Gdy weźmiesz sekwencję specjalną CSS z atrybutu HTML (tj. Poza CSS), zostanie ona odczytana dosłownie, a nie interpretowana jako część ciągu CSS.

Jeśli chcesz zakodować znak w atrybucie HTML, musisz zakodować go jako encję HTML. Będzie to widoczne w CSS jako odpowiedni znak Unicode. Ponieważ jest to szesnastkowy sekwencja ucieczki można transliterować to like so:

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

Alternatywnie można po prostu use the Unicode character itself:

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

Answer 2

można USS css trójkąt na strzałkę. 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; 
}