Юникод через CSS: до

Я использую Font Awesome на моей веб-странице, и я хочу отобразить значок внутри псевдоэлемента :before.

В соответствии с documentation/cheatsheet, я должен набрать , чтобы получить этот шрифт, но он не работает. Я считаю, что это нормально, потому что HTML-объекты не поддерживаются в :before.
Поэтому я немного искал язык и узнал, что если вы хотите отображать HTML-объекты в :before, вам нужно использовать шестнадцатеричную ссылку escaped.
Поэтому я искал шестую ссылку на , но ничего не нашел. Я считаю, что это потому, что это значения "частного использования", что бы это ни значило.

Есть ли способ заставить его работать в :before?

Ответ 1

Экранированное шестнадцатеричное задание  равно \f066.

content: "\f066";

Ответ 2

В CSS, Unicode FontAwesome работает только тогда, когда объявлено правильное семейство шрифтов:

font-family: "FontAwesome";
content: "\f066";

Ответ 3

Fileformat.info - довольно хорошая ссылка для этого материала. В вашем случае это уже в шестнадцатеричном виде, поэтому шестнадцатеричное значение f066. Таким образом, вы бы сделали:

content: "\f066";

Ответ 4

Кодовыми точками, используемыми в трюках шрифтов значков, обычно являются коды личного использования, что означает, что они не имеют общепринятого значения и не должны использоваться в открытом обмене информацией только по частному соглашению между заинтересованными сторонами. Тем не менее, кодовые точки частного использования могут быть представлены как любое другое значение Unicode, например. в CSS с использованием обозначений типа \f066, как ответили другие. Вы даже можете ввести кодовую точку как таковую, если ваш документ закодирован в кодировке UTF-8, и вы знаете, как вводить произвольное значение Unicode по его номеру в вашей среде разработки (но, конечно, обычно оно отображается с использованием символа для неизвестного символ).

Однако это не обычный способ использования значков. Обычно вы используете файл CSS, снабженный шрифтом, и используете конструкции типа <span class="icon-resize-small">foo</span>. Затем код CSS позаботится о вставке символа в начале элемента, и вам не нужно знать номер кодовой точки.