Использование свойства attr(data-icon) для отображения юникода перед элементом

Question

Давайте продемонстрируем пример с простым HTML-кодом, например так:

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

Я хотел бы, чтобы этот элемент имел значок префикса, установленный его атрибутом данных (data-icon), поэтому я установил файл CSS следующим образом:

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

Мой желаемый результат этого примера будет выглядеть так:

▶Title

Вместо желаемого результата все, что я могу получить, это:

\25B6Title

Итак, мой вопрос: что я делаю не так / что мне не хватает?

Пример JSFiddle: http://jsfiddle.net/Lqgr9zv6/

Answer 1

Экранирующие последовательности CSS работают только внутри строк CSS. Когда вы берете escape-последовательность CSS из атрибута HTML (т.е. вне CSS), она будет читаться буквально, а не интерпретироваться как часть строки CSS.

Если вы хотите закодировать символ в атрибуте HTML, вам необходимо закодировать его как сущность HTML. Это будет восприниматься CSS как соответствующий символ Unicode. Поскольку это шестнадцатеричная escape-последовательность, вы можете транслитерировать ее следующим образом:

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

В качестве альтернативы вы можете просто использовать сам символ Unicode:

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

Answer 2

Если вы устанавливаете data-iconатрибут динамически с помощью JavaScript, и вы не можете жестко закодировать смайлики, как я, вам нужно использовать String.fromCodePoint():

      DivElement.dataset.icon = String.fromCodePoint("0x25B6");
// yields: <div data-icon="▶">Title</div>

Answer 3

Вы можете использовать треугольник CSS для стрелки. 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;
}