Sla sh и целое число от сцепления attr не создадут код значка

Question

Я пытаюсь передать код значка fa без sla sh следующим образом:

<div data-icon="f00c"></div>

А затем на CSS добавить sla sh \ перед data-icon как это:

content: '\\' attr(data-icon);

Проблема в том, что это напечатает \f00c, а не значок. Конечно, это сработает, если я просто сделаю:

content: '\f00c';

Есть ли способ добиться этого?

Answer 1

Причина такого поведения заключается в том, что анализатор таблиц стилей в css обнаруживает обратные слеши в появляющейся строке css и преобразует следующие четыре символа в шестнадцатеричное значение в один символ UTF8.

Добавляя '\' перед значением атрибута, вы просто объединяете обратную косую черту sh с символами атрибута. CSS не предоставляет функции для преобразования шестнадцатеричных значений в виде строк (например, заданных attr) в символ во время выполнения.

Нет другого способа, кроме как обрабатывать его на стороне HTML путем экранирования шестнадцатеричные значения там, например, &#xXXXX;:

content: attr(data-icon);

<div data-icon="&#xf00c;"></div>
<!-- or adding the unicode directly, if it's an utf8 document -->
<div data-icon=""></div>