Как правильно вставлять символы юникода?
Везде рекомендуют использовать коды для вставки символов юникода (например ⌘ ). Чем этот способ лучше вставки через копирование самого символа?
Отслеживать
задан 3 мая 2019 в 18:25
19 1 1 серебряный знак 6 6 бронзовых знаков
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Не все кодировки будут правильно «понимать» ваш символ, если вы его просто вставите. UTF-8, к примеру, поймёт, а вот другая какая-то может и кракозябры показать непонятные (так как у разных кодировок под одинаковыми символами могут быть разные «знаки/числа»). А юникод определяет связь между символами и «числами», он не зависит от кодировки. Как-то так
Отслеживать
ответ дан 3 мая 2019 в 18:45
5,005 2 2 золотых знака 11 11 серебряных знаков 25 25 бронзовых знаков
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Юникод в вебе: введение для начинающих
Верите вы или нет, но существует формат изображений, встроенных в браузер. Этот формат позволяет загружать изображения до того, как они понадобились, обеспечивает рендеринг изображения на обычных или retina экранах и позволяет добавлять к изображениям CSS. ОК, это не совсем правда. Это не формат изображения, хотя все остальное остается в силе. Используя его, вы можете создавать иконки, независимые от разрешения, не требующие время на загрузку и стилизуемые с помощью CSS.
В этой статье я опишу основы Unicode (далее — Юникод) и некоторые интересные вещи, которые вы можете сделать с его помощью.
Что такое Юникод?
Юникод это возможность корректно отображать буквы и знаки пунктуации из различных языков на одной страницы. Он невероятно полезен: пользователи смогут работать с вашим сайтом по всему миру и он будет показывать то, что вы хотите — это может быть французский язык с диакритическими знаками или Kanji.
Юникод продолжает развиваться: сейчас актуальна версия 8.0 в которой более 120 тысяч символов (в оригинальной статье, опубликованной в начале 2014 года, речь шла о версии 6.3 и 110 тысячах символов).
Кроме букв и цифр, в Юникоде есть и другие символы и иконки. В последних версиях в их число вошли эмодзи, которые вы можете видеть в месседжере iOS.
Страницы HTML создаются из последовательности символов Юникода и при отсылке по сети они конвертируются в байты. Каждая буква и каждый символ любого языка имеют свой уникальный код и кодируются при сохранении файла.
При использовании системы кодирования UTF-8 вы можете напрямую вставлять в текст символы Юникода, но также можно добавлять их в текст, указывая цифровую символьную ссылку. Например, ♥ это символ сердечка и вы можете вывести этот символ, просто добавив код в разметку ♥.
Эту числовую ссылку можно задавать как в десятичном формате, так и в шестнадцатеричном. Десятичный формат требует добавления в начале буквы x , запись ♥ даст то же самое сердечко (♥), что и предыдущий вариант. (2665 это шестнадцатеричный вариант 9829).
Если вы добавляете символ Юникода с помощью CSS, то вы можете использовать только шестнадцатеричные значения.
Некоторые наиболее часто используемые символы Юникода имеют более запоминаемые текстовые имена или аббревиатуры вместо цифровых кодов — это, например, амперсанд ( & — &). Такие символы называются мнемоники в HTML, их полный список есть в Википедии.
Почему вам стоит использовать Юникод?
Хороший вопрос, вот несколько причин:
- Чтобы использовать корректные символы из разных языков.
- Для замены иконок.
- Для замены иконок, подключаемых через @font-face .
- Для задания CSS-классов
Корректные символы
Первая из причин не требует никаких дополнительных действий. Если HTML сохранен в формате UTF-8 и его кодировка передана по сети как UTF-8, все должно работать как надо.
Должно. К сожалению, не все браузеры и устройства поддерживают все символы Юникода одинаково (точнее, не все шрифты поддерживают полный набор символов). Например, недавно добавленные символы эмодзи поддерживаются не везде.
Иконки
Вторая причина использования Юникода это наличие большого количества полезных символов, которые можно использовать в качестве иконок. Например, ▶, ≡ и ♥.
Их очевидный плюс в том, что вам не надо никаких дополнительных файлов, чтобы добавить их на страницу, а, значит, ваш сайт будет быстрее. Вы также можете изменить их цвет или добавить тень с помощью CSS. А добавив переходы (css transition) вы сможете плавно менять цвет иконки при наведении на нее без каких-либо дополнительных изображений.
Предположим, что я хочу подключить индикатор рейтинга со звездами на свою страницу. Я могу сделать это так:
Получится следующий результат:
Образец рейтинга в Firefox
Но если вам не повезет, вы увидите что-то вроде этого:
Тот же рейтинг на BlackBerry 9000
Так бывает, если используемые символы отсутствуют в шрифте браузера или устройства (к счастью, эти звездочки поддерживаются отлично и старые телефоны BlackBerry являются здесь единственным исключением).
Если символ Юникода отсутствует, на его месте могут быть разные символы от пустого квадрата (□) до ромба со знаком вопроса (�).
А как найти символ Юникода, который может подойти для использования в вашем дизайне? Вы можете поискать его на сайте типа Unicodinator, просматривая имеющиеся символы, но есть и лучший вариант. Shapecatcher — этот отличный сайт позволяет вам нарисовать искомую иконку, после чего предлагает вам список похожих символов Юникода.
Использование Юникода с @font-face иконками
Если вы используете иконки, подключаемые с внешним шрифтом через @font-face , символы Юникода можно использовать в качестве запасного варианта. Таким образом вы можете показать похожий символ Юникода на тех устройствах или в браузерах, где @font-face не поддерживается:
Слева иконки Font Awesome в Chrome, а справа замещающие их символы Юникода в Opera Mini.
Многие инструменты для подбора @font-face используют диапазон символов Юникода из области для частного использования (private use area). Проблема этого подхода в том, что если @font-face не поддерживается, пользователю передаются коды символов без какого-либо смысла.
Использование символов из области для частного использования может также вынудить Internet Explorer 8 перейти в режим совместимости, а это сродни открытию портала в ад и призванию отвратительных монстров из старых IE (подробнее эта проблема описана в статье Джереми Кита).
IcoMoon отлично подходит для создания наборов иконок в @font-face и позволяет выбрать в качестве основы для иконки подходящий символ Юникода.
Но будьте внимательны — некоторые браузеры и устройства не любят отдельные символы Юникода при их использовании с @font-face . Имеет смысл проверить поддержку символов Юникода с помощью Unify — это приложение поможет вам определить, насколько безопасно использование символа в наборе иконок @font-face .
Поддержка символов Юникода
Основная проблема с использованием символов Юникода в качестве запасного варианта это плохая поддержка в скринридерах (опять-таки, некоторые сведения об этом можно найти на Unify), поэтому важно осторожно выбирать используемые символы.
Если ваша иконка это просто декоративный элемент рядом с текстовой меткой, читаемым скринридером, вы можете особо не волноваться. Но если иконка расположена отдельно, стоит добавить скрытую текстовую метку, чтобы помочь пользователям скринридеров. Даже если символ Юникода будет считан скринридером, есть вероятность, что он будет сильно отличен от своего предназначения. Например, ≡ (≡) в качестве иконки-гамбургера будет считан VoiceOver на iOS как “идентичный”.
Юникод в названиях CSS-классов
То, что Юникод можно использовать в названиях классов и в таблицах стилей известно с 2007 года. Именно тогда Джонатан Снук написал об использовании символов Юникода во вспомогательных классов при верстке скругленных углов. Особого распространения эта идея не получила, но о возможности использовать Юникод в названиях классов (спецсимволы или кириллицу) знать стоит.
Выбор шрифтов
Совсем немногие шрифты поддерживают полный набор символов Юникода, поэтому при выборе шрифта сразу проверяйте наличие нужных вам символов.
Много иконок в Segoe UI Symbol или Arial Unicode MS . Эти шрифты есть и на PC и на Mac; в Lucida Grande также достаточное количество символов Юникода. Вы можете добавить эти шрифты в декларацию font-family , чтобы обеспечить наличие максимального количества символов Юникода для пользователей, у которых эти шрифты установлены.
Определение поддержки Юникода
Было бы очень удобно иметь возможность проверить наличие того или иного символа Юникода, но нет гарантированного способа сделать это.
В Modernizr есть проверка поддержки эмодзи — но она работает проверкой одного пикселя и поэтому даст неправильный результат, если в нужном символе этот пиксель не используется. Да и сама проверка наличия отдельного символа не скажет ничего о поддержке остальных ста тысяч.
Проверяйте. И обеспечивайте запасные варианты, чтобы пользователь всегда мог понять, что происходит при отсутствии нужного символа.
Юникод в письмах
Юникод можно использовать не только на веб-страницах, но и в письмах.
Но здесь есть та же проблема: некоторые почтовые клиенты и некоторые устройства поддерживают нужные символы, а некоторые нет. Небольшое тестирование, позволяющее определить уровень поддержки символов, было проведено Campaign Monitor.
Символы Юникода могут быть эффективны при наличии поддержки. Например, эмодзи в теме письма выделяет его на фоне остальных в почтовом ящике.
Заключение
Эта статья затрагивает лишь основы Юникода. Надеюсь, она окажется полезной и поможет вам лучше понять Юникод и эффективно применять его.
Список ссылок
- “Пуленепробиваемые” иконочные шрифты
- Символы Юникода в теме письма
- IcoMoon (Генератор набора иконок @font-face на основе Юникода)
- Shape Catcher (Инструмент для распознавания символов Юникода)
- Unicodinator(таблица символов Юникода)
- Unify (Проверка поддержки символов Юникода в браузерах)
- Unitools (Коллекция инструментов для работы с Юникодом)
100+ Юникод символов для HTML/CSS/JS/PHP
В этой заметке речь пойдет об универсальных Unicode-символах. Иконках, которые понимают все браузеры и системы. Для того чтобы использовать иконки в HTML коде (верстке), обычно устанавливаются пакеты иконок на базе шрифтов, например Font Awesome. Однако, часто удобнее вставить известный браузеру Unicode-символ и не подключать лишние шрифты. Рассмотрим такие символы в этой заметке. В браузерах есть встроенные библиотеки доступных иконок и иероглифов. Доступны они в Unicode формате — это стандарт, который присваивает уникальный идентификатор для каждого специального символа. Число таких символов (иконок, значков) постоянно растет и сегодня их более 110 000. Но браузеры понимают не все такие символы. Браузеры работают на базе иконок которые доступны в вашей системе: Windows, Linux, OS X, Android и iOS. В этой заметке собраны иконки, которые установлены во всех системах, а значит можно сказать что они универсальные и их в 99% случаев их поймет и отобразит любой браузер (однако не всегда они будут выглядеть одинаково).
Ищите символы на сайте G r a p h e m i c a
Ищите символы на сайте w3schools.com
Заметка: статья о кодировках символов и Юникоде (англ).
Читайте также Заметки по SVG — безграничное число иконок.
Как использовать Unicode символы
- Найти нужный значок.
- Скопировать иконку или её код.
- Вставить скопированное в HTML/JS/PHP как обычный текст. В CSS его можно использовать в качестве значения свойства content:’★’; , или как код content:’\2605′; .
Использование кода иконки в разных языках. Например UTF8 код ◑ = 25D1 , тогда:
CSS \25D1 JavaScript / JSON \u25D1 C / C++ / Java / Python \u25D1 Perl \x Ruby \u
Значки по сути являются обычным текстом, поэтому им можно указать стили текста: тень, размер, цвет и т.д.
Оглавление:
Иконки
| Иконка | Decimal | Entity | css | Название |
|---|---|---|---|---|
| ☺ | ☺ | \263A | Улыбка | |
| ♨ | ♨ | \2668 | Хот-спрингс | |
| ➑ | ➑ | \2791 | 8-мяч | |
| ☆ | ☆ | \2606 | Белая звезда | |
| ★ | ★ | \2605 | Черная звезда | |
| ✪ | ✪ | \272A | Белая звезда обведенная | |
| ✰ | ✰ | \2730 | Белая звезда | |
| ✧ | ✧ | \2727 | Белая четырехконечная звезда | |
| ✦ | ✦ | \2726 | Черная четырехконечная звезда | |
| ♡ | ♡ | \2661 | Белое сердце | |
| ❤ | ❤ | \2764 | Черное сердце | |
| ✈ | ✈ | \2708 | Самолет | |
| ✂ | ✂ | \2702 | Черные ножницы | |
| ✄ | ✄ | \2704 | Белые ножницы | |
| ♕ | ♕ | \2655 | Корона | |
| ✝ | ✝ | \271D | Крест | |
| † | † | † | \2020 | Кинжал |
| ‡ | ‡ | ‡ | \2021 | Двойной Кинжал |
| ◑ | ◑ | \25D1 | Черно-белый круг | |
| ♪ | ♪ | \266A | Нота | |
| ♫ | ♫ | \266B | Ноты | |
| ✣ | ✣ | \2723 | Четыре звездочки с шарами | |
| ☑ | ☑ | \2611 | Чекбокс с галочкой | |
| ✔ | ✔ | \2714 | Галочка | |
| ✘ | ✘ | \2718 | Крестик | |
| ╳ | ╳ | — | \2573 | Квадратный крестик |
| ✎ | ✎ | \270E | Карандаш | |
| ✍ | ✍ | \270D | Пишущая рука | |
| ♀ | ♀ | \2640 | Женщина | |
| ♂ | ♂ | \2642 | Мужчина | |
| ☎ | ☎ | \260E | Черный телефон | |
| ☏ | ☏ | \260F | Белый телефон | |
| ✉ | ✉ | \2709 | Конверт | |
| ✆ | ✆ | \2706 | Знак телефона |
Стрелки
| Иконка | Decimal | Entity | css | Название |
|---|---|---|---|---|
| ← | ← | ← | \2190 | Стрелка влево |
| → | → | → | \2192 | Стрелка вправо |
| ↑ | ↑ | ↑ | \2191 | Стрелка вверх |
| ↓ | ↓ | ↓ | \2193 | Стрелка вниз |
| ↔ | ↔ | ↔ | \2194 | Стрелка влево вправо |
| ↕ | ↕ | — | \2195 | Стрелка вверх вниз |
| ⇄ | ⇄ | — | \21C4 | Стрелки вправо и влево |
| ⇅ | ⇅ | — | \21C5 | Стрелки вверх и вниз |
| ↲ | ↲ | — | \21B2 | Вниз-влево 90 градусов |
| ↳ | ↳ | — | \21B3 | Стрелка вниз-вправо 90 градусов |
| ↱ | ↱ | — | \21B1 | Стрелка вверх-вправо 90 градусов |
| ⇤ | ⇤ | — | \21E4 | Стрелка влево к полосе |
| ↶ | ↶ | — | \21B6 | Полукруг против часовой стрелки |
| ↷ | ↷ | — | \21B7 | Полукруг по часовой стрелке |
| ↺ | ↺ | — | \21BA | Круг против часовой стрелки |
| ↻ | ↻ | — | \21BB | Круг по часовой стрелке |
| ➔ | ➔ | — | \2794 | Широкоугольная стрелка вправо |
| ↯ | ↯ | — | \21AF | Зигзагообразная стрелка вниз |
| ↖ | ↖ | — | \2196 | Стрелка Северо-Запада |
| ➘ | ➘ | — | \2798 | Тяжелая юго-восточная стрела |
| ➙ | ➙ | — | \2799 | Тяжелая стрелка вправо |
| ➚ | ➚ | — | \279A | Тяжелая северо-восточная стрела |
| ➟ | ➟ | — | \279F | Пунктирная стрелка вправо |
| ⇠ | ⇠ | — | \21E0 | Пунктирная стрелка влево |
| ➤ | ➤ | — | \27A4 | Черная стрелка вправо |
| ▶ | ▶ | — | \25B6 | Стрелка вправо (max) |
| ◀ | ◀ | — | \25C0 | Стрелка влево (max) |
| ▲ | ▲ | — | \25B2 | Стрелка вверх (max) |
| ▼ | ▼ | — | \25BC | Стрелка вниз (max) |
| ▸ | ▸ | — | \25B8 | Стрелка вправо (min) |
| ◂ | ◂ | — | \25C2 | Стрелка влево (min) |
| ▴ | ▴ | — | \25B4 | Стрелка вверх (min) |
| ▾ | ▾ | — | \25BE | Стрелка вниз (min) |
| ► | ► | — | \25BA | Стрелка вправо (удлиненная) |
| ◄ | ◄ | — | \25C4 | Стрелка влево (удлиненная) |
| ▷ | ▷ | — | \25B7 | Белый указатель вправо |
| ◁ | ◁ | — | \25C1 | Белый указатель влево |
| △ | △ | — | \25B3 | Белый указатель вверх |
| ▽ | ▽ | — | \25BD | Белый указатель вниз |
| ⇦ | ⇦ | — | \21E6 | Белая стрелка влево |
| ⇨ | ⇨ | — | \21E8 | Белая стрелка вправо |
| ⇒ | ⇒ | ⇒ | \21D2 | Двойная стрелка вправо |
| ⇐ | ⇐ | ⇐ | \21D0 | Двойная стрелка влево |
| ⇑ | ⇑ | ⇑ | \21D1 | Двойная стрелка вверх |
| ⇓ | ⇓ | ⇓ | \21D3 | Двойная стрелка вниз |
| ⇔ | ⇔ | ⇔ | \21D4 | Двойная стрелка влево-вправо |
| ↵ | ↵ | ↵ | \21B5 | Возврат каретки |
Кавычки
| Иконка | Decimal | Entity | css | Название |
|---|---|---|---|---|
| « | « | « | \00AB | Кавычки слева |
| » | » | » | \00BB | Кавычек справа |
| ‘ | ‘ | ‘ | \2018 | Открывающая одинарная кавычка |
| ’ | ’ | ’ | \2019 | Закрывающая одинарная кавычка |
| ‚ | ‚ | ‚ | \201A | Нижняя одинарная кавычка |
| “ | “ | “ | \201C | Открывающая двойная кавычка |
| ” | ” | ” | \201D | Закрывающая двойная кавычка |
| „ | „ | „ | \201E | Нижняя двойная кавычка |
| ′ | ′ | ′ | \2032 | Штрих, минуты, лапка |
| ″ | ″ | ″ | \2033 | Двойной штрих |
| ‴ | ‴ | — | \2034 | Тройной штрих |
Специальные
| Иконка | Decimal | Entity | css | Название |
|---|---|---|---|---|
| № | № | — | \2116 | Номер |
| © | © | © | \00A9 | Авторское право |
| ® | ® | ® | \00AE | Зарегистрированный |
| ™ | ™ | ™ | \2122 | Товарный знак |
| ℮ | ℮ | — | \212E | Предполагаемый |
| · | · | · | \00B7 | Средняя Точка (Маркер списка) |
| • | • | • | \2022 | Точка |
| ■ | ■ | — | \25A0 | Черный квадрат |
| □ | □ | — | \25A1 | Белый квадрат |
| — | — | — | \2014 | Длинное тире |
| ‰ | ‰ | ‰ | \2030 | Знак промилле |
| … | … | … | \2026 | Многоточие |
| ¶ | ¶ | ¶ | \00B6 | Знак абзаца |
Валюта
| Иконка | Decimal | Entity | css | Название |
|---|---|---|---|---|
| ₽ | ₽ | — | \0020BD | Рубль (правый Alt+8) |
| € | € | € | \0020AC | Евро |
| £ | £ | £ | \00A3 | Фунт |
| ₤ | ₤ | — | \20A4 | Лира |
| ¥ | ¥ | ¥ | \00A5 | Иена |
| ¢ | ¢ | ¢ | \00A2 | Цент |
| ¤ | ¤ | ¤ | \00A4 | Валюта |
Погода
| Иконка | Decimal | Entity | css | Название |
|---|---|---|---|---|
| ° | ° | ° | \00B0 | Градус |
| ☀ | ☀ | — | \2600 | Солнце маленькое |
| ☼ | ☼ | — | \263C | Солнце большое |
| ☁ | ☁ | — | \2601 | Облако |
| ❆ | ❆ | — | \2746 | Снежинка 1 |
| ❅ | ❅ | — | \2745 | Снежинка 2 |
| ❄ | ❄ | — | \2744 | Снежинка 3 |
Указатели
| Иконка | Decimal | Entity | css | Название |
|---|---|---|---|---|
| ☚ | ☚ | — | \261A | Указатель Влево черный |
| ☛ | ☛ | — | \261B | Указатель Вправо черный |
| ☜ | ☜ | — | \261C | Указатель Левый белый |
| ☝ | ☝ | — | \261D | Указатель Вверх белый |
| ☞ | ☞ | — | \261E | Указатель Вправо белый |
| ☟ | ☟ | — | \261F | Указатель Вниз белый |
Фракции
| Иконка | Decimal | Entity | css | Название |
|---|---|---|---|---|
| ½ | ½ | ½ | \00BD | Половина (1/2) |
| ¼ | ¼ | ¼ | \00BC | Четверть (1/4) |
| ¾ | ¾ | ¾ | \00BE | Три четверти (3/4) |
| ⅓ | ⅓ | — | \2153 | Одна треть (1/3) |
| ⅔ | ⅔ | — | \2154 | Две трети (2/3) |
| ⅛ | ⅛ | — | \215B | Одна восьмая (1/8) |
| ⅜ | ⅜ | — | \215C | Три восьмых (3/8) |
| ⅝ | ⅝ | — | \215D | Пять восьмых (5/8) |
| ⅞ | ⅞ | — | \215E | Семь восьмых (7/8) |
Римские цифры
| Иконка | Decimal | Entity | css | Название |
|---|---|---|---|---|
| Ⅰ | Ⅰ | — | \2160 | Один (римская цифра) |
| Ⅱ | Ⅱ | — | \2161 | Два (римская цифра) |
| Ⅲ | Ⅲ | — | \2162 | Три (римская цифра) |
| Ⅳ | Ⅳ | — | \2163 | Четыре (римская цифра) |
| Ⅴ | Ⅴ | — | \2164 | Пять (римская цифра) |
| Ⅵ | Ⅵ | — | \2165 | Шесть (римская цифра) |
| Ⅶ | Ⅶ | — | \2166 | Семь (римская цифра) |
| Ⅷ | Ⅷ | — | \2167 | Восемь (римская цифра) |
| Ⅸ | Ⅸ | — | \2168 | Девять (римская цифра) |
| Ⅹ | Ⅹ | — | \2169 | Десять (римская цифра) |
| Ⅺ | Ⅺ | — | \216A | Одиннадцать (римская цифра) |
| Ⅻ | Ⅻ | — | \216B | Двенадцать (римская цифра) |
Математика
| Иконка | Decimal | Entity | css | Название |
|---|---|---|---|---|
| ∞ | ∞ | ∞ | \221E | Бесконечность |
| ± | ± | ± | \00B1 | Плюс-минус |
| ≅ | ≅ | ≅ | \2245 | Приблизительно равно |
| ≈ | ≈ | ≈ | \2248 | Асимптотически равно |
| ≠ | ≠ | ≠ | \2260 | Не равно |
| ≡ | ≡ | ≡ | \2261 | Тождественно равно |
| ≤ | ≤ | ≤ | \2264 | Меньше или равно |
| ≥ | ≥ | ≥ | \2265 | Больше или равно |
| ÷ | ÷ | ÷ | \00F7 | Деление |
| × | × | × | \00D7 | Умножение х |
| ✖ | ✖ | — | \2716 | Тяжелое умножение x |
| ¹ | ¹ | ¹ | \00B9 | Один (верхний индекс) |
| ² | ² | ² | \00B2 | Два (верхний индекс) |
| ³ | ³ | ³ | \00B3 | Три (верхний индекс) |
| ⊕ | ⊕ | ⊕ | \2295 | Прямая сумма |
| ⊗ | ⊗ | ⊗ | \2297 | Векторное произведение |
| ∏ | ∏ | ∏ | \220F | N-арное произведение |
| ∑ | ∑ | ∑ | \2211 | N-арная сумма (Сигма) |
| ∅ | ∅ | ∅ | \2205 | Пустое множество. Диаметр. |
| ∠ | ∠ | ∠ | \2220 | Угол |
| ∥ | ∥ | — | \2225 | Параллельно |
| ⊥ | ⊥ | ⊥ | \22A5 | Перпендикулярно |
| △ | △ | — | \25B3 | Треугольник |
| ○ | ○ | — | \25CB | Круг |
| □ | □ | — | \25A1 | Квадрат |
| ‾ | ‾ | ‾ | \203E | Надчеркивание |
| ⁄ | ⁄ | ⁄ | \2044 | Дробная черта |
| Иконка | Decimal | Entity | css | Название |
|---|---|---|---|---|
| √ | √ | √ | \221A | Радикал |
| ∝ | ∝ | ∝ | \221D | Пропорционально |
| ∩ | ∩ | ∩ | \2229 | Пересечение |
| ∪ | ∪ | ∪ | \222A | Объединение |
| ∫ | ∫ | ∫ | \222B | Интеграл |
| ∴ | ∴ | ∴ | \2234 | Следовательно |
| ∼ | ∼ | ∼ | \223C | Оператор тильда |
| ⊂ | ⊂ | ⊂ | \2282 | Подмножество |
| ⊃ | ⊃ | ⊃ | \2283 | Надмножество |
| ⊄ | ⊄ | ⊄ | \2284 | Не подмножество |
| ⊆ | ⊆ | ⊆ | \2286 | Подмножество или равно |
| ⊇ | ⊇ | ⊇ | \2287 | Надмножество или равно |
| ∧ | ∧ | ∧ | \2227 | Логичское И |
| ∨ | ∨ | ∨ | \2228 | Логичское ИЛИ |
| Иконка | Decimal | Entity | css | Название |
|---|---|---|---|---|
| ℑ | ℑ | ℑ | \2111 | Мнимая часть числа |
| ℜ | ℜ | ℜ | \211C | Действительная часть числа |
| ℵ | ℵ | ℵ | \2135 | Алеф |
| Иконка | Decimal | Entity | css | Название |
|---|---|---|---|---|
| ∀ | ∀ | ∀ | \2200 | Квантор всеобщности |
| ∃ | ∃ | ∃ | \2203 | Квантор существования |
| ∂ | ∂ | ∂ | \2202 | Дифференциал |
| ∇ | ∇ | ∇ | \2207 | Набла |
| ∈ | ∈ | ∈ | \2208 | Принадлежит множеству |
| ∉ | ∉ | ∉ | \2209 | Не принадлежит множеству |
| ∋ | ∋ | ∋ | \220B | Является членом |
| Иконка | Decimal | Entity | css | Название |
|---|---|---|---|---|
| Δ | Δ | Δ | \0394 | Дельта (прописная) |
| ƒ | ƒ | ƒ | \0192 | Курсивное f |
| Α | Α | Α | \0391 | Альфа (прописная) |
| Β | Β | Β | \0392 | Бета (прописная) |
| Γ | Γ | Γ | \0393 | Гамма (прописная) |
| Ε | Ε | Ε | \0395 | Эпсилон (прописной) |
| Ζ | Ζ | Ζ | \0396 | Дзета (прописная) |
| Η | Η | Η | \0397 | Эта (прописная) |
| Θ | Θ | Θ | \0398 | Тета (прописная) |
| Ι | Ι | Ι | \0399 | Иота (прописная) |
| Κ | Κ | Κ | \039A | Каппа (прописная) |
| Λ | Λ | Λ | \039B | Ламбда (прописная) |
| Μ | Μ | Μ | \039C | Мю (прописная) |
| Ν | Ν | Ν | \039D | Ню (прописная) |
| Ξ | Ξ | Ξ | \039E | Кси (прописная) |
| Ο | Ο | Ο | \039F | Омикрон (прописной) |
| Π | Π | Π | \03A0 | Пи (прописная) |
| Ρ | Ρ | Ρ | \03A1 | Ро (прописная) |
| Σ | Σ | Σ | \03A3 | Сигма (прописная) |
| Τ | Τ | Τ | \03A4 | Тау (прописная) |
| Υ | Υ | Υ | \03A5 | Ипсилон (прописная) |
| Φ | Φ | Φ | \03A6 | Фи (прописная) |
| Χ | Χ | Χ | \03A7 | Хи (прописная) |
| Ψ | Ψ | Ψ | \03A8 | Пси (прописная) |
| Ω | Ω | Ω | \03A9 | Омега (прописная) |
| α | α | α | \03B1 | Альфа (строчная) |
| β | β | β | \03B2 | Бета (строчная) |
| γ | γ | γ | \03B3 | Гамма (строчная) |
| δ | δ | δ | \03B4 | Дельта (строчная) |
| ε | ε | ε | \03B5 | Эпсилон (строчная) |
| ζ | ζ | ζ | \03B6 | Дзета (строчная) |
| η | η | η | \03B7 | Эта (строчная) |
| θ | θ | θ | \03B8 | Тета (строчная) |
| ι | ι | ι | \03B9 | Иота (строчная) |
| κ | κ | κ | \03BA | Каппа (строчная) |
| λ | λ | λ | \03BB | Ламбда (строчная) |
| μ | μ | μ | \03BC | Мю (строчная) |
| ν | ν | ν | \03BD | Ню (строчная) |
| ξ | ξ | ξ | \03BE | Кси (строчная) |
| ο | ο | ο | \03BF | Омикрон (строчный) |
| π | π | π | \03C0 | Пи (строчная) |
| ρ | ρ | ρ | \03C1 | Ро (строчная) |
| ς | ς | ς | \03C2 | Сигма конечная (строчная) |
| σ | σ | σ | \03C3 | Сигма (строчная) |
| τ | τ | τ | \03C4 | Тау (строчная) |
| υ | υ | υ | \03C5 | Ипсилон (строчная) |
| φ | φ | φ | \03C6 | Фи (строчная) |
| χ | χ | χ | \03C7 | Хи (строчная) |
| ψ | ψ | ψ | \03C8 | Пси (строчная) |
| ω | ω | ω | \03C9 | Омега (строчная) |
| ϑ | ϑ | ϑ | \03D1 | Тета (строчная) |
| ϒ | ϒ | ϒ | \03D2 | Ипсилон с крючком |
| ϖ | ϖ | ϖ | \03D6 | Пи |
Карты
| Иконка | Decimal | Entity | css | Название |
|---|---|---|---|---|
| ♠ | ♠ | ♠ | \2660 | Пики черные |
| ♥ | ♥ | ♥ | \2665 | Сердце черные |
| ♦ | ♦ | ♦ | \2666 | Буби черные |
| ♣ | ♣ | ♣ | \2663 | Крести черные |
| ♤ | ♤ | — | \2664 | Пики белые |
| ♡ | ♡ | — | \2661 | Сердце белые |
| ♢ | ♢ | — | \2662 | Буби белые |
| ♧ | ♧ | — | \2667 | Крести белые |
Шахматы
| Иконка | Decimal | Entity | css | Название |
|---|---|---|---|---|
| ♔ | ♔ | — | \2654 | Король белый |
| ♕ | ♕ | — | \2655 | Ферзь белый |
| ♖ | ♖ | — | \2656 | Ладья белая |
| ♗ | ♗ | — | \2657 | Слон белый |
| ♘ | ♘ | — | \2658 | Конь белый |
| ♙ | ♙ | — | \2659 | Пешка белая |
| ♚ | ♚ | — | \265A | Король черный |
| ♛ | ♛ | — | \265B | Ферзь черный |
| ♜ | ♜ | — | \265C | Ладья черная |
| ♝ | ♝ | — | \265D | Слон черный |
| ♞ | ♞ | — | \265E | Конь черный |
| ♟ | ♟ | — | \265F | Пешка черная |
Дерево папок
| Иконка | Decimal | Entity | css | Название |
|---|---|---|---|---|
| ├ | ├ | — | \251C | |
| └ | └ | — | \2514 | |
| │ | │ | — | \2502 | |
| ┬ | ┬ | — | \252C | |
| ─ | ─ | — | \2500 |
Всегда показвать иконки как текст
Как заставить браузеры показыать иконки как текст, а не как Emoji.
Для этого нужно дописать к иконке Вариативный селектор 15 (VARIATION SELECTOR-15 — VS15) — U+FE0E . Тогда обе эти иконки будут рендерится как один глиф.
�� ��︎ = ��︎ ☝ ☝︎ = ☝︎ Однако он работает не со всеми иконками: ✍ ✍️︎ = ✍︎
- https://stackoverflow.com/questions/32915485/
- https://mts.io/2015/04/21/unicode-symbol-render-text-emoji/
Юникод, внутреннее устройство строк
Этот раздел более подробно описывает, как устроены строки. Такие знания пригодятся, если вы намерены работать с эмодзи, редкими математическими символами, иероглифами, и т.д.
Как мы уже знаем, строки в JavaScript основаны на Юникоде: каждый символ представляет из себя последовательность байтов из 1-4 байтов.
JavaScript позволяет нам вставить символ в строку, указав его шестнадцатеричный Юникод с помощью одной из этих трех нотаций:
-
\xXX Вместо XX должны быть указаны две шестнадцатеричные цифры со значением от 00 до FF . В этом случае \xXX – это символ, Юникод которого равен XX . Поскольку нотация \xXX поддерживает только две шестнадцатеричные цифры, ее можно использовать только для первых 256 символов Юникода. Эти 256 символов включают в себя латинский алфавит, большинство основных синтаксических символов и некоторые другие. Например, «\x7A» – это то же самое, что «z» (Юникод U+007A ).
alert( "\x7A" ); // z alert( "\xA9" ); // ©, символ авторского права