Как использовать символы Unicode в CSS
Объявление кодировки и кодировка файла
Для использования символов Unicode в CSS первым делом нужно объявить соответствующую кодировку; рекомендуется UTF-8. Это делается с помощью так называемого эт-правила @charset
в самом начале файла, то есть первой строкой:
@charset "utf-8";
Синтаксис: сначала указывается @charset
; затем — ровно ОДИН пробел; затем — имя кодировки в ДВОЙНЫХ кавычках; затем — точка с запятой. Синтаксис должен быть точно таким, как указан здесь, Это ВАЖНО, так как иначе будет ошибка. То есть нельзя использовать между @charset
и названием кодировки больше или меньше одного пробела; нельзя заключать имя кодировки в одинарные кавычки; обязательно нужно ставить точку с запятой в конце; также ничего нельзя писать ПЕРЕД @charset
, включая комментарии, то есть первым символом в файле должен быть «эт» (@; «собака», по-нашему).
Однако одного обявления кодировки мало: нужно чтобы и само содержимое файла стилей было закодировано в объявленой кодировке.
Эт-правилом
@charset
мы просто указываем браузеру какой алгоритм кодирования ему нужно использовать, чтобы правильно прочесть содержимое файла, однако само содержимое может быть закодировано по другому алгоритму и тогда, как вы понимаете, браузер обработает файл некорректно. Обычно в большинстве редакторов кода текущая кодировка файла вместе с другой полезной информацией отображается в строке статуса (в нижней части окна), а изменить её можно через меню — эта возможность есть, поищите; описывать в данном посте где именно она находится для всех редакторов, коих сотни, а то и тысячи, по понятным причинам я не стал; если не найдёте, напишите мне — я вам подскажу. Если вы будете изменять кодировку файла, то учтите, что в некоторых редакторах может быть два пункта меню, которые могут сбить вас с толку:
Кодировать в <Имя кодировки>
…
Преобразовать в <Имя кодировки> Нужно выбрать именно Преобразовать в <Имя кодировки>.
На самом деле указывать кодировку в файле стилей необязательно ЕСЛИ она обявлена в HTML-документе, но ещё раз напомню: кодировка содержимого файла должна совпадать с объявленной. Это, кстати, касается не только CSS, но и абсолютно любых других областей — ведь если вы говорите, что следующие данные нужно обработать по алгоритму указанной кодировки, то вы же и должны предоставить закодированные этим же алгоритмом данные.
Я так заостряю ваше внимание на том, что помимо объявления кодировки нужно чтобы и данные были в той же кодировке, так как на этом очень часто спотыкаются и не понимают почему всё в кракозябрах.
Тем не менее, хоть и кодировку в файле стилей объявлять необязательно ЕСЛИ она обявлена в HTML-документе, как я уже сказал выше, всё равно лучше это сделать, так как мало ли что ☺:
@charset "utf-8";
Рекомендую ВСЕГДА ВЕЗДЕ объявлять кодировки и использовать, по крайней мере в Web’е, именно UTF-8!
Использование символов Unicode в свойстве Content
Рассмотрим CSS-свойство content
, которое используется совместно с псевдоэлементами ::before
и ::after
. .. В данном свойстве указывается контент, который будет помещён перед или после элемента, к которому применяется соответствующий псевдоэлемент:
selector::before, selector::after { content: "строка"; }
- строка
- любой набор символов, который выводится как есть, кроме экранированных последовательнойстей (см. далее).
Пример использования свойства Content
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Пример использования свойства Content</title> <style> p::before { content: «< < «; } p::after { content: » > >»; } </style> </head> <body> <h2>Пример использования свойства Content</h2> <p>Lorem ipsum …</p> </body> </html> Контент, добавленный с помощью свойстваcontent
не выделяется курсором мыши и не копируется в буфер обмена.Пример использования символов Unicode в свойстве Content
Допустим, нужно вывести с помощью свойства content
после некоторого элемента смайлик (☺), который имеет номер в Unicode u+263a
; это запишется так:
selector::after { content: "\263a"; }
То есть номер символа в Unicode нужно просто проэкранировать обратным слешем (\).
Также отмечу — впередистоящие нули можно не указывать: \0030
идентично \30
.
Второй способ — это указать символ непосредственно:
selector::after { content: "☺"; }<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Пример использования символов Unicode в свойстве Content</title> <style> p::before { content: «\263a «; } p::after { content: «☺»; } </style> </head> <body> <h2>Пример использования символов Unicode в свойстве Content</h2> <p>Hello, World!</p> </body> </html>
Чтобы добавляемые через content
пробельные символы Unicode (пробелы, табуляции и переводы строк) отображались как есть (имеется в виду предварительное форматирование), для элемента должно быть определено свойство white-space
со значением pre
или подобным ему.
Некоторые символы Unicode
# | Название по-русски | Название по-английски | Вид | Мнемоника | HTML-код | Unicode |
---|---|---|---|---|---|---|
1 | Горизонтальная табуляция | Horizontal Tabulation | 	 | u+0009 | ||
2 | Перевод строки (разделитель строк в Unix) | New Line (Nl) | | u+000a | ||
3 | Вертикальная табуляция | Vertical Tabulation |  | u+000b | ||
4 | Пробел | Space |   | u+0020 | ||
5 | Двойная кавычка (универсальная) | Quotation Mark | « | " | " | u+0022 |
6 | Амперсанд | Ampersand | & | & | & | u+0026 |
7 | Апостроф (одинарная кавычка) | Apostrophe | ‘ | ' | ' | u+0027 |
8 | Знак меньше | Less-Than Sign | < | < | < | u+003c |
9 | Знак больше | Greater-Than Sign | > | > | > | u+003e |
10 | Неразрывный пробел | No-Break Space | |   | u+00a0 |
К слову, заметим, что мнемоники (частично) соответствуют названию символа по-английски; пример: — No-Break SPace.
- @charset
- content
- Declaring character encodings in CSS
- The Unicode Consortium
- white-space
- Чем UTF-8 отличается от Unicode
Спецсимволы HTML — Как создать сайт
8
Янв,2018
Спецсимволы HTML
Здравствуйте! Я уже писал про атрибуты HTML и теги HTML. В этой же статье речь пойдет про спецсимволы HTML, или как их еще называют символы-мнемоники. В основном сфера их применения — это для указания спецсимволов, которых как правило нет в наборе стандартной клавиатуры, либо которые не поддерживает кодировка страницы.
Для того чтобы разместить такой символ на странице, необходимо просто указать HTML-код.
Следует отметить, что спецсимволы очень чувствительны к регистру, поэтому их необходимо прописывать точно так, как указано в таблице ниже. Если у спецсимволов, нет мнемоники, то они могут не отображаться в браузерах.
Для добавления символов внутрь тегов достаточно воспользоваться HTML-кодом символа, а для использования символов в стилях, надо вставить мнемонику в качестве значения свойства content например в псевдоэлементах after и before.
Спецсимвол будет наследовать от цвета текста родительского элемента. А вот чтобы изменить цвет спецсимвола, его нужно разместить внутрь тега <span> или же задать значение свойства color (при вставке спецсимволов через свойство content).
1. Полезные знаки и символы
Вид | HTML-код | CSS-код | Описание |
---|---|---|---|
☃ | ☃ | \2603 | Снеговик |
☦ | ☦ | \2626 | Православный крест |
⚓ | ⚓ | \2693 | Якорь |
✆ | ✆ | \2706 | Знак телефона |
☎ | ☎ | \260E | Телефон |
☕ | ☕ | \2615 | Горячие напитки |
✎ | ✎ | \270E | Карандаш, направленный вправо-вниз |
✏ | ✏ | \270F | Карандаш |
✐ | ✐ | \2710 | Карандаш, направленный вправо-вверх |
✑ | ✑ | \2711 | Незакрашенное острие пера |
✒ | ✒ | \2712 | Закрашенное острие пера |
⚜ | ⚜ | \269C | Геральдическая лилия |
⛑ | ⛑ | \26D1 | Шлем с белым крестом |
⚝ | ⚝ | \269D | Начерченная белая звезда |
❄ | ❄ | \2744 | Снежинка |
❤ | ❤ | \2764 | Закрашенное жирное сердце |
❅ | ❅ | \2745 | Зажатая трилистниками снежинка |
❆ | ❆ | \2746 | Жирная остроугольная снежинка |
★ | ★ | \2605 | Закрашенная звезда |
☆ | ☆ | \2606 | Незакрашенная звезда |
✪ | ✪ | \272A | Незакрашенная звезда в закрашенном круге |
✫ | ✫ | \272B | Закрашенная звезда с незакрашенным кругом внутри |
✯ | ✯ | \272F | Вращающаяся звезда |
❉ | ❉ | \2749 | Звёздочка с шарообразными окончаниями |
❋ | ❋ | \274B | Жирная восьмиконечная каплеобразная звёздочка-пропеллер |
✲ | ✲ | \2732 | Звёздочка с незакрашенным центром |
☀ | ☀ | \2600 | Закрашенное солнце с лучами |
☁ | ☁ | \2601 | Облака |
☂ | ☂ | \2602 | Зонтик |
☑ | ☑ | \2611 | Галочка в квадрате |
☒ | ☒ | \2612 | Крестик в квадрате |
☹ | ☹ | \2639 | Нахмуренный смайлик |
☺ | ☺ | \263A | Улыбающийся смайлик |
☻ | ☻ | \263B | Закрашенный улыбающийся смайлик |
☭ | ☭ | \262D | Серп и молот |
⚑ | ⚑ | \2691 | Закрашенный флаг |
⚐ | ⚐ | \2690 | Незакрашенный флаг |
☰ | ☰ | \2630 | Триграмма |
✿ | ✿ | \273f | Закрашенный цветок |
❀ | ❀ | \2740 | Незакрашенный цветок |
✾ | ✾ | \273E | Цветок с шестью лепестками |
❁ | ❁ | \2741 | Закрашенный обведённый цветок |
❂ | ❂ | \2742 | Цветок из точек |
✉ | ✉ | \2709 | Конверт |
❦ | ❦ | \2766 | Сердце в виде цветка |
❶ | ❶ | \2776 | Номер 1 |
❷ | ❷ | \2777 | Номер 2 |
❸ | ❸ | \2778 | Номер 3 |
❹ | ❹ | \2779 | Номер 4 |
❺ | ❺ | \277A | Номер 5 |
❻ | ❻ | \277B | Номер 6 |
❼ | ❼ | \277C | Номер 7 |
❽ | ❽ | \277D | Номер 8 |
➒ | ➒ | \2792 | Номер 9 |
➓ | ➓ | \2793 | Номер 10 |
✖ | ✖ | \2716 | Жирный знак умножения |
✘ | ✘ | \2718 | Жирный крестик |
✔ | ✔ | \2714 | Жирная отметка галочкой |
✚ | ✚ | \271A | Жирный крест |
⚛ | ⚛ | \269B | Символ атома |
♺ | ♺ | \267A | Символ переработки |
❑ | ❑ | \2751 | Незакрашенный квадрат с правой нижней тенью |
❒ | ❒ | \2752 | Незакрашенный квадрат с правой верхней тенью |
◈ | ◈ | \25C8 | Алмаз в оправе |
◐ | ◐ | \25D0 | Круг с левой закрашенной половиной |
◑ | ◑ | \25D1 | Круг с закрашенной правой половиной |
⁂ | ⁂ | \2042 | Три звездочки |
2.
Знаки пунктуацииВид | HTML-код | CSS-код | Описание |
---|---|---|---|
| \00A0 | Неразрывный пробел | |
| ­ | \00AD | Место возможного переноса |
< | < | \003C | Знак «меньше чем» (начало тега) |
> | > | \003E | Знак «больше чем» (конец тега) |
« | « | \00AB | Левая двойная угловая скобка |
» | » | \00BB | Правая двойная угловая скобка |
‹ | ‹ | \2039 | Левая угловая одиночная кавычка |
› | › | \203A | Правая угловая одиночная кавычка |
« | " | \0022 | Двойная кавычка |
′ | ′ | \2032 | Одиночный штрих |
″ | ″ | \2033 | Двойной штрих |
‘ | ‘ | \2018 | Левая одиночная кавычка |
’ | ’ | \2019 | Правая одиночная кавычка |
‚ | ‚ | \201A | Нижняя одиночная кавычка |
“ | “ | \201C | Левая двойная кавычка |
” | ” | \201D | Правая двойная кавычка |
„ | „ | \201E | Нижняя двойная кавычка |
❜ | ❜ | \275C | Жирная одинарная верхняя запятая |
❛ | ❛ | \275B | Жирная одинарная повёрнутая верхняя запятая |
& | & | \0026 | Амперсанд |
‘ | ' | \0027 | Апостроф (одинарная кавычка) |
§ | § | \00A7 | Параграф |
© | © | \00A9 | Знак copyright |
¬ | ¬ | \00AC | Знак отрицания |
® | ® | \00AE | Знак зарегистрированной торговой марки |
¯ | ¯ | \00AF | Знак долготы над гласным |
° | ° | \00B0 | Градус |
± | ± | \00B1 | Плюс-минус |
¹ | ¹ | \00B9 | Верхний индекс «1» |
² | ² | \00B2 | Верхний индекс «2» |
³ | ³ | \00B3 | Верхний индекс «3» |
¼ | ¼ | \00BC | Одна четверть |
½ | ½ | \00BD | Одна вторая |
¾ | ¾ | \00BE | Три четверти |
´ | ´ | \00B4 | Знак ударения |
µ | µ | \00B5 | Микро |
¶ | ¶ | \00B6 | Знак абзаца |
· | · | \00B7 | Знак умножения |
¿ | ¿ | \00BF | Перевернутый вопросительный знак |
ƒ | ƒ | \0192 | Знак флорина |
™ | ™ | \2122 | Знак торговой марки |
• | • | \2022 | Маркер списка |
… | … | \2026 | Многоточие |
‾ | ‾ | \203E | Надчеркивание |
– | – | \2013 | Среднее тире |
— | — | \2014 | Длинное тире |
‰ | ‰ | \2030 | Промилле |
} | } | \007D | Правая фигурная скобка |
{ | { | \007B | Левая фигурная скобка |
= | = | \003D | Знак равенства |
≠ | ≠ | \2260 | Знак неравенства |
≅ | ≅ | \2245 | Конгруэнтность (геометрическое равенство) |
≈ | ≈ | \2248 | Почти равно |
≤ | ≤ | \2264 | Меньше чем или равно |
≥ | ≥ | \2265 | Больше чем или равно |
∠ | ∠ | \2220 | Угол |
⊥ | ⊥ | \22A5 | Перпендикулярно (кнопка вверх) |
√ | √ | \221A | Квадратный корень |
∑ | ∑ | \2211 | N-ичное суммирование |
∫ | ∫ | \222B | Интеграл |
※ | ※ | \203B | Знак сноски |
÷ | ÷ | \00F7 | Знак деления |
∞ | ∞ | \221E | Знак бесконечности |
@ | @ | \0040 | Символ собака |
[ | [ | \005B | Левая квадратная скобка |
] | ] | \005D | Правая квадратная скобка |
3.
СтрелкиВид | HTML-код | CSS-код | Описание |
---|---|---|---|
← | ← | \2190 | Стрелка влево |
↑ | ↑ | \2191 | Стрелка вверх |
→ | → | \2192 | Стрелка вправо |
↓ | ↓ | \2193 | Стрелка вниз |
↔ | ↔ | \2194 | Стрелка влево-вправо |
↵ | ↵ | \21B5 | Стрелка вниз и влево – знак возврата каретки |
⇐ | ⇐ | \21D0 | Двойная стрелка налево |
⇑ | ⇑ | \21D1 | Двойная стрелка вверх |
⇒ | ⇒ | \21D2 | Двойная стрелка направо |
⇓ | ⇓ | \21D3 | Двойная стрелка вниз |
⇔ | ⇔ | \21D4 | Двойная стрелка влево-вправо |
➠ | ➠ | \27A0 | Летящая стрела |
➤ | ➤ | \27A4 | Наконечник стрелы |
➥ | ➥ | \27A5 | Изогнутая стрела, указывающая вниз и вправо |
➦ | ➦ | \27A6 | Изогнутая стрела, указывающая вверх и вправо |
➳ | ➳ | \27B3 | Стрела направо |
↺ | ↺ | \21BA | Круглая стрелка с наконечником против часовой стрелки |
↻ | ↻ | \21BB | Круглая стрелка с наконечником против часовой стрелки |
⇧ | ⇧ | \21E7 | Толстая полая стрелка вверх |
↩ | ↩ | \21A9 | Стрелка налево с крючком |
➫ | ➫ | \27AB | Наклонённая вниз объёмная стрелка |
⬇ | ⬇ | \2B07 | Закрашенная стрелка вниз |
⬆ | ⬆ | \2B06 | Закрашенная стрелка вверх |
4.
Карточные мастиВид | HTML-код | CSS-код | Описание |
---|---|---|---|
♠ | ♠ | \2660 | «Пики» |
♣ | ♣ | \2663 | «Трефы» |
♥ | ♥ | \2665 | «Червы» |
♦ | ♦ | \2666 | «Бубны» |
♡ | ♡ | \2661 | Контур «Червы» |
♢ | ♢ | \2662 | Контур «Бубны» |
♤ | ♤ | \2664 | Контур «Пики» |
♧ | ♧ | \2667 | Контур «Трефы» |
5. Деньги
Вид | HTML-код | CSS-код | Описание |
---|---|---|---|
¢ | ¢ | \FFE0 | Цент |
£ | £ | \FFE1 | Фунт стерлингов |
₽ | ₽ | \20BD | Российский рубль |
¥ | ¥ | \00A5 | Йена или юань |
€ | € | \20AC | Евро |
$ | $ | \0024 | Доллар |
₴ | ₴ | \20B4 | Знак гривны |
₹ | ₹ | \20B9 | Индийская рупия |
圓 | 圓 | \5713 | Китайский юань |
₸ | ₸ | \20B8 | Казахстанский тенге |
6.
Знаки зодиакаВид | HTML-код | CSS-код | Описание |
---|---|---|---|
♈ | ♈ | \2648 | Овен |
♉ | ♉ | \2649 | Телец |
♊ | ♊ | \264A | Близнецы |
♋ | ♋ | \264B | Рак |
♌ | ♌ | \264C | Лев |
♍ | ♍ | \264D | Дева |
♎ | ♎ | \264E | Весы |
♏ | ♏ | \264F | Скорпион |
♐ | ♐ | \2650 | Стрелец |
♑ | ♑ | \2651 | Козерог |
♒ | ♒ | \2652 | Водолей |
♓ | ♓ | \2653 | Рыбы |
Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.
Поделиться
Твитнуть
Поделиться
(Visited 455 times, 1 visits today)
javascript — Что вы можете добавить перед псевдоконтентом в CSS?
спросил
Изменено 1 год, 6 месяцев назад
Просмотрено 633 раза
Я проверил значок на веб-сайте и заметил, что в css перед содержимым есть что-то вроде этого:
.c-navi-new-list__category-link --fresh:before { содержимое: "\E0B3\00FE0E"; размер шрифта: 16px; размер шрифта: 1.143rem; высота строки: 1,375; цвет: #a1a3a8; поле слева: 4px; }
Что это за код внутри контента? Как я могу изменить его?
- javascript
- html
- css
- css-селекторы
- псевдокласс
Что это за код внутри контента? Как я могу изменить его?
Код внутри свойства content:
представляет две вещи:
Первая часть, \E0B3
, представляет собой CSS-представление значка символа UTF-8.
Как @shafayetmaruf уже показал в своей выходной ссылке, символ представляет собой прямоугольную рамку (см. также: https://utf8-icons.com/utf-8-character-57523).
Чтобы изменить отображаемый символ, вы можете просто изменить его на другой код значка (см. https://www.utf8icons.com/ для других примеров).
Вторая часть, \00FE0E
, представляет собой селектор вариантов Unicode в текстовом стиле. По сути, при использовании значков Unicode некоторые браузеры отображают значок как смайлик, а не как текст. Недостатком этого является то, что версия с эмодзи не может быть оформлена с помощью CSS, тогда как текстовая версия может. Селектор варианта Unicode заставляет значок, указанный в первой части, отображаться как текст, чтобы разработчик мог затем стилизовать его с помощью CSS.
См. этот вопрос SO для получения дополнительной информации: Как предотвратить отображение символов Unicode в виде смайликов в HTML из JavaScript?
Кстати, чтобы все это выяснить, все, что я сделал, это погуглил различные части «контента» и, как обычно, предоставил Бог Google.
Я не знаю, что на самом деле вы хотите знать. Но из вашего комментария в ответе Маркуса я предполагаю, что вы хотите знать, что происходит с этим фрагментом кода
Предположим, что у нас есть абзац
Это абзац
Теперь, если мы реализуем ваш css, посмотрим, что произойдет:
p::before { содержимое: "\E0B3\00FE0E"; размер шрифта: 16px; размер шрифта: 1.143rem; высота строки: 1,375; цвет: #a1a3a8; поле слева: 4px; }
Вывод будет таким: [выход] https://i.stack.imgur.com/KFQpY.png
Теперь давайте посмотрим, за что отвечает каждая строка здесь:
- :: «до» — тег означает, что мы делаем что-то перед абзацем
- «контент» — означает, что мы добавляем контент перед абзацем, в нашем случае это значок.
- «размер шрифта» — указывает, что размер шрифта нашего добавленного контента будет 10 пикселей, а позже он был изменен на 1,143 рем ( рем — это единица измерения ).
- «высота строки» — указывает, какое будет расстояние между двумя строками
- «цвет» — относится к цвету значка.
- «margin-left» — указывает, что мы помещаем немного места в левую часть значка. В нашем случае это 4px.
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя электронную почту и пароль
Опубликовать как гость
Электронная почта
Требуется, но никогда не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Список символов Unicode для CSS перед содержимым
спросил
Изменено 3 месяца назад
Просмотрено 11 тысяч раз
Я искал различные списки юникода, подобные этому, но до сих пор не нашел тот, в котором перечислены \0108
, который является альтернативным знаком доллара, похожим на потрясающий шрифт, но также есть и другие от 0101 до 0113, которые я в списке не видел.
Есть ли какие-то недокументированные символы или это может быть ссылка на значок в пользовательском файле font.ttf? Можно ли использовать шестнадцатеричные ссылки с файлами пользовательских шрифтов?
- css
- юникод
3
Вы должны использовать этот код:
body {шрифт: обычный 18px/27px menlo, monospace, sans-serif; цвет: #777;} .unicode-list li {стиль списка: нет; нижняя граница: сплошная 1px #ccc;} .link-list li {шрифт: 300 16px/27px Helvetica;} :before {цвет: #A0002E; отображение: встроенный блок; шрифт: обычный 20px/20px Helvetica; ширина: 30 пикселей; } {цвет: голубой;} .mail: перед {содержанием: "\ 2709";} .phone:before {содержание: "\2706";} .bigarrow:before {содержимое: "\27BD";} .open-quote:before {содержимое: "\275D";} .close-quote:before {содержимое: "\275E";} .openquote:before {содержимое: "\201C";} .closequote:before {содержание: "\201D";} .alert:before {содержимое: "\26A0";} . checkmark:before {содержимое: "\2713";} .ballot:before {содержание: "\2717";} .black-diamond:before {содержимое: "\2756";} .phi:before {содержимое: "\03C6";} .bullseye:before {содержание: "\25CE";} .arrow-bullet:before {содержимое: "\25B8";} .black-diamond:before {содержимое: "\25C6";} .white-diamond:before {содержимое: "\25C7";} .poison:before {содержание: "\2620";} .happy:before {содержание: "\263A";} .sad:before {содержание: "\2639";} .command:before {содержимое: "\2318";} .option:before {содержимое: "\2325";} .shift:before {содержимое: "\21E7";} .apple: перед {содержанием: "\ F8FF";} .menu:before {содержание: "\2630";} .darr-1: перед {содержимым: "\ 21B4";} .darr-2: перед {содержанием: "\25BE";} .poop: перед {содержимым: "\ 1f4a9";} .star:before {содержимое: "\2605";}
- 2709 – почта
- 2706 – телефон
- 27BD – Большая стрела
- 275D – Открыть предложение
- 275E — Закрыть цитату
- 201C – Открытая цитата
- 201D — Закрыть цитату
- 26A0 — Опасность!!
- 2713 – галочка
- 2717 – Бюллетень
- 2756 – Черный бриллиант
- 2756 – Фи
- 25CE — Яблочко
- 25B8 — Пуля со стрелой
- 25C6 – Черный бриллиант
- 25C7 – Белый ромб
- 2620 – яд
- 263A – Счастливый
- 2639- грустно
- 2318 – Команда
- 2325 – вариант
- 21E7 – Shift
- F8FF – яблоко (не универсальное)
- 2630 – Меню (☰)
- 21B4 – Стрелка вправо с углом вниз (↴)
- 25BE – Малый треугольник вниз (▾)
- 1f4a9 — Какашки
- 2605 – Звездочка
Полезные символы:
http://en. wikibooks.org/wiki/Unicode/List_of_useful_symbols
http://www.decodeunicode.org/en/dingbats
http://en.wikipedia.org /wiki/List_of_Unicode_characters
http://www.danshort.com/HTMLentities/
Я обнаружил, что система, которую я редактирую, использует ttf-файл пользовательского шрифта, а ссылки Unicode в файле css соответствуют тем, что видны в Windows. Карта персонажей. Я нашел этот пост о создании личных персонажей полезным.
Для ответа на вопрос:
Где можно найти список символов Unicode, которые можно использовать в
содержание
свойство CSS?
Вы можете найти официальный список здесь: https://www.unicode.org/charts/ Там же можно искать по шестнадцатеричному коду персонажа.
Другой альтернативой является этот сайт, где вы также можете искать по описанию персонажа: https://www.fileformat.info/info/unicode/char/search.htm
Пример кода:
.line-check::before { содержимое: '\02705'; } .