100+ Юникод символов для HTML/CSS/JS/PHP

В этой заметке речь пойдет об универсальных Unicode-символах. Иконках, которые понимают все браузеры и системы. Для того чтобы использовать иконки в HTML коде (верстке), обычно устанавливаются пакеты иконок на базе шрифтов, например Font Awesome. Однако, часто удобнее вставить известный браузеру Unicode-символ и не подключать лишние шрифты. Рассмотрим такие символы в этой заметке.

В браузерах есть встроенные библиотеки доступных иконок и иероглифов. Доступны они в Unicode формате — это стандарт, который присваивает уникальный идентификатор для каждого специального символа. Число таких символов (иконок, значков) постоянно растет и сегодня их более 110 000. Но не все браузеры понимают все такие символы. Браузеры работают на базе иконок которые доступны в вашей системе: Windows, Linux, OS X, Android и iOS. В этой заметке собраны иконки, которые установлены во всех таких системах, а значит их можно назвать универсальными и их в 99% случаев поймет и отобразит любой браузер.

Заметка: статья о кодировках символов и Юникоде (англ).

Как использовать Unicode символы

Значки, приведенные в таблицах ниже, являются обычными символами, которые можно копировать и вставлять, как если бы они были буквами текста. Однако, если кодировка файла (HTML/CSS) куда вставляется скопированный значок не UTF-8 вставленный значок отображаться не будет и вообще потеряется... Для таких случаев в таблице приведет HTML код знака, этот код всегда будет работать.

Что нужно сделать, чтобы использовать иконки:

Найти нужный значок.
Скопировать код.
Вставить его в HTML/JS/PHP как обычный текст. В CSS его можно использовать в качестве значения свойства content:'★'; или так по коду content:'\2605';.

Значки по сути являются обычным текстом, поэтому им можно указать стили текста: тень, размер, цвет и т.д.

Оглавление:

Иконки
Стрелки
Кавычки
Специальные
Валюта
Погода
Указатели
Карты
Шахматы
Фракции
Римские цифры
Математика
Дерево папок

Иконки

Мин	Макс	HTML-код	Название
☺	☺	`☺`	Улыбка
♨	♨	`♨`	Хот-спрингс
➑	➑	`➑`	8-мяч
☆	☆	`☆`	Белая звезда
★	★	`★`	Черная звезда
✪	✪	`✪`	Белая звезда обведенная
✰	✰	`✰`	Белая звезда
✧	✧	`✧`	Белая четырехконечная звезда
✦	✦	`✦`	Черная четырехконечная звезда
♡	♡	`♡`	Белое сердце
❤	❤	`❤`	Черное сердце
✈	✈	`✈`	Самолет
✂	✂	`✂`	Черные ножницы
✄	✄	`✄`	Белые ножницы
♕	♕	`♕`	Корона
✝	✝	`✝`	Крест
†	†	`&dagger;`	Кинжал
‡	‡	`&Dagger;`	Двойной Кинжал
◑	◑	`◑`	Черно-белый круг
♪	♪	`♪`	Нота
♫	♫	`♫`	Ноты
✣	✣	`✣`	Четыре звездочки с шарами
☑	☑	`☑`	Чекбокс с галочкой
✔	✔	`✔`	Галочка
✘	✘	`✘`	Крестик
✎	✎	`✎`	Карандаш
✍	✍	`✍`	Пишущая рука
♀	♀	`♀`	Женщина
♂	♂	`♂`	Мужчина
☎	☎	`☎`	Черный телефон
☏	☏	`☏`	Белый телефон
✉	✉	`✉`	Конверт
✆	✆	`✆`	Знак телефона

меню

Стрелки

Мин	Макс	HTML-код	Название
←	←	`←` `←`	Стрелка влево
→	→	`→` `→`	Стрелка вправо
↑	↑	`↑` `↑`	Стрелка вверх
↓	↓	`↓` `↓`	Стрелка вниз
↔	↔	`↔` `↔`	Стрелка влево вправо
↕	↕	`↕`	Стрелка вверх вниз
⇄	⇄	`⇄`	Стрелки вправо и влево
⇅	⇅	`⇅`	Стрелки вверх и вниз
↲	↲	`↲`	Вниз-влево 90 градусов
↳	↳	`↳`	Стрелка вниз-вправо 90 градусов
↱	↱	`↱`	Стрелка вверх-вправо 90 градусов
⇤	⇤	`⇤`	Стрелка влево к полосе
↶	↶	`↶`	Полукруг против часовой стрелки
↷	↷	`↷`	Полукруг по часовой стрелке
↺	↺	`↺`	Круг против часовой стрелки
↻	↻	`↻`	Круг по часовой стрелке
➔	➔	`➔`	Широкоугольная стрелка вправо
↯	↯	`↯`	Зигзагообразная стрелка вниз
↖	↖	`↖`	Стрелка Северо-Запада
➘	➘	`➘`	Тяжелая юго-восточная стрела
➙	➙	`➙`	Тяжелая стрелка вправо
➚	➚	`➚`	Тяжелая северо-восточная стрела
➟	➟	`➟`	Пунктирная стрелка вправо
⇠	⇠	`⇠`	Пунктирная стрелка влево
➤	➤	`➤`	Черная стрелка вправо
▶	▶	`▶`	Стрелка вправо (max)
◀	◀	`◀`	Стрелка влево (max)
▲	▲	`▲`	Стрелка вверх (max)
▼	▼	`▼`	Стрелка вниз (max)
▸	▸	`▸`	Стрелка вправо (min)
◂	◂	`◂`	Стрелка влево (min)
▴	▴	`▴`	Стрелка вверх (min)
▾	▾	`▾`	Стрелка вниз (min)
►	►	`►`	Стрелка вправо (удлиненная)
◄	◄	`◄`	Стрелка влево (удлиненная)
▷	▷	`▷`	Белый указатель вправо
◁	◁	`◁`	Белый указатель влево
△	△	`△`	Белый указатель вверх
▽	▽	`▽	Белый указатель вниз
⇦	⇦	`⇦`	Белая стрелка влево
⇨	⇨	`⇨`	Белая стрелка вправо
⇒	⇒	`⇒`	Двойная стрелка вправо
⇐	⇐	`⇐`	Двойная стрелка влево
⇑	⇑	`&uArr;`	Двойная стрелка вверх
⇓	⇓	`&dArr;`	Двойная стрелка вниз
⇔	⇔	`⇔`	Двойная стрелка влево-вправо
↵	↵	`&crarr;`	Возврат каретки

меню

Кавычки

Мин	Макс	HTML-код	Название
«	«	`«`	Кавычки слева
»	»	`»`	Кавычек справа
‘	‘	`‘`	Открывающая одинарная кавычка
’	’	`’`	Закрывающая одинарная кавычка
‚	‚	`&sbquo;`	Нижняя одинарная кавычка
“	“	`“`	Открывающая двойная кавычка
”	”	`”`	Закрывающая двойная кавычка
„	„	`&bdquo;`	Нижняя двойная кавычка

меню

Специальные

Мин	Макс	HTML-код	Название
№	№	`№`	Номер
©	©	`©`	Авторское право
®	®	`®`	Зарегистрированный
™	™	`™`	Товарный знак
℮	℮	`℮`	Предполагаемый
•	•	`•` `•`	Точка (Маркер списка)
·	·	`·`	Средняя Точка (Маркер списка)
—	—	`—`	Длинное тире
‰	‰	`&permil;`	Знак промилле
…	…	`…`	Многоточие

меню

Валюта

Мин	Макс	HTML-код	Название
€	€	`€`	Евро
£	£	`£`	Фунт
₤	₤	`₤`	Лира
¥	¥	`¥`	Иена
¢	¢	`¢`	Цент
¤	¤	`¤`	Валюта

меню

Погода

Мин	Макс	HTML-код	Название
°	°	`°`	Градус
☀	☀	`☀`	Солнце маленькое
☼	☼	`☼`	Солнце большое
☁	☁	`☁`	Облако
❆	❆	`❆`	Снежинка 1
❅	❅	`❅`	Снежинка 2
❄	❄	`❄`	Снежинка 3

меню

Указатели

Мин	Макс	HTML-код	Название
☚	☚	`☚`	Указатель Влево черный
☛	☛	`☛`	Указатель Вправо черный
☜	☜	`☜`	Указатель Левый белый
☝	☝	`☝`	Указатель Вверх белый
☞	☞	`☞`	Указатель Вправо белый
☟	☟	`☟`	Указатель Вниз белый

меню

Карты

Мин	Макс	HTML-код	Название
♠	♠	`♠`	Пики черные
♥	♥	`♥`	Сердце черные
♦	♦	`♦`	Буби черные
♣	♣	`♣`	Крести черные
♤	♤	`♤`	Пики белые
♡	♡	`♡`	Сердце белые
♢	♢	`♢`	Буби белые
♧	♧	`♧`	Крести белые

меню

Шахматы

Мин	Макс	HTML-код	Название
♔	♔	`♔`	Король белый
♕	♕	`♕`	Ферзь белый
♖	♖	`♖`	Ладья белая
♗	♗	`♗`	Слон белый
♘	♘	`♘`	Конь белый
♙	♙	`♙`	Пешка белая
♚	♚	`♚`	Король черный
♛	♛	`♛`	Ферзь черный
♜	♜	`♜`	Ладья черная
♝	♝	`♝`	Слон черный
♞	♞	`♞`	Конь черный
♟	♟	`♟`	Пешка черная

меню

Фракции

Мин	Макс	HTML-код	Мнемоника	Название
¼	¼	`¼`	`¼`	Четверть (1/4)
½	½	`½`	`½`	Половина (1/2)
¾	¾	`¾`	`¾`	Три четверти (3/4)
⅓	⅓	`⅓`	`&frac13;`	Одна треть (1/3)
⅔	⅔	`⅔`	`&frac23;`	Две трети (2/3)
⅛	⅛	`⅛`	`&frac18;`	Одна восьмая (1/8)
⅜	⅜	`⅜`	`&frac38;`	Три восьмых (3/8)
⅝	⅝	`⅝`	`&frac58;`	Пять восьмых (5/8)
⅞	⅞	`⅞`	`&frac78;`	Семь восьмых (7/8)

меню

Римские цифры

Мин	Макс	HTML-код	Название
Ⅰ	Ⅰ	`Ⅰ`	Один (римская цифра)
Ⅱ	Ⅱ	`Ⅱ`	Два (римская цифра)
Ⅲ	Ⅲ	`Ⅲ`	Три (римская цифра)
Ⅳ	Ⅳ	`Ⅳ`	Четыре (римская цифра)
Ⅴ	Ⅴ	`Ⅴ`	Пять (римская цифра)
Ⅵ	Ⅵ	`Ⅵ`	Шесть (римская цифра)
Ⅶ	Ⅶ	`Ⅶ`	Семь (римская цифра)
Ⅷ	Ⅷ	`Ⅷ`	Восемь (римская цифра)
Ⅸ	Ⅸ	`Ⅸ`	Девять (римская цифра)
Ⅹ	Ⅹ	`Ⅹ`	Десять (римская цифра)
Ⅺ	Ⅺ	`Ⅺ`	Одиннадцать (римская цифра)
Ⅻ	Ⅻ	`Ⅻ`	Двенадцать (римская цифра)

меню

Математика

Мин	Макс	HTML-код	Название
∞	∞	`∞` `∞`	Бесконечность
±	±	`±`	Плюс-минус
≅	≅	`&cong;`	Приблизительно равно
≈	≈	`≈` `≈`	Асимптотически равно
≠	≠	`≠` `≠`	Не равно
≡	≡	`&equiv;`	Тождественно равно
≤	≤	`≤` `≤`	Меньше или равно
≥	≥	`≥` `≥`	Больше или равно
÷	÷	`÷`	Деление
×	×	`×`	Умножение х
✖	✖	`✖`	Тяжелое умножение x
¹	¹	`¹`	Один (верхний индекс)
²	²	`²`	Два (верхний индекс)
³	³	`³`	Три (верхний индекс)
⊕	⊕	`⊕` `&oplus;`	Прямая сумма
⊗	⊗	`⊗` `&otimes;`	Векторное произведение
∏	∏	`∏`	N-арное произведение
∑	∑	`∑` `∑`	N-арная сумма (Сигма)
∅	∅	`∅`	Пустое множество. Диаметр.
∠	∠	`∠` `&ang;`	Угол
∥	∥	`∥`	Параллельно
⊥	⊥	`⊥` `&perp;`	Перпендикулярно
△	△	`△`	Треугольник
○	○	`○`	Круг
□	□	`□`	Квадрат
‾	‾	`&oline;`	Надчеркивание
⁄	⁄	`&frasl;`	Дробная черта


√	√	`√`	Радикал
∝	∝	`&prop;`	Пропорционально
∩	∩	`∩`	Пересечение
∪	∪	`∪`	Объединение
∫	∫	`∫`	Интеграл
∴	∴	`&there4;`	Следовательно
∼	∼	`&sim;`	Оператор тильда
⊂	⊂	`⊂`	Подмножество
⊃	⊃	`⊃`	Надмножество
⊄	⊄	`&nsub;`	Не подмножество
⊆	⊆	`&sube;`	Подмножество или равно
⊇	⊇	`&supe;`	Надмножество или равно
∧	∧	`∧` `&and;`	Логичское И
∨	∨	`∨` `&or;`	Логичское ИЛИ


′	′	`′`	Знак прим
″	″	`″`	Знак двойной прим
ℑ	ℑ	`&image;`	Мнимая часть числа
ℜ	ℜ	`&real;`	Действительная часть числа
ℵ	ℵ	`&alefsym;`	Алеф


∀	∀	`∀`	Квантор всеобщности
∃	∃	`∃`	Квантор существования
∂	∂	`∂`	Дифференциал
∇	∇	`∇`	Набла
∈	∈	`∈`	Принадлежит множеству
∉	∉	`∉`	Не принадлежит множеству
∋	∋	`&ni;`	Является членом


ƒ	ƒ	`&fnof;`	Курсивное f
Α	Α	`Α`	Альфа (прописная)
Β	Β	`Β`	Бета (прописная)
Γ	Γ	`Γ`	Гамма (прописная)
Δ	Δ	`∆` `Δ`	Дельта (прописная)
Ε	Ε	`Ε`	Эпсилон (прописной)
Ζ	Ζ	`Ζ`	Дзета (прописная)
Η	Η	`Η`	Эта (прописная)
Θ	Θ	`Θ`	Тета (прописная)
Ι	Ι	`Ι`	Иота (прописная)
Κ	Κ	`Κ`	Каппа (прописная)
Λ	Λ	`Λ`	Ламбда (прописная)
Μ	Μ	`Μ`	Мю (прописная)
Ν	Ν	`Ν`	Ню (прописная)
Ξ	Ξ	`Ξ`	Кси (прописная)
Ο	Ο	`Ο`	Омикрон (прописной)
Π	Π	`Π`	Пи (прописная)
Ρ	Ρ	`Ρ`	Ро (прописная)
Σ	Σ	`Σ`	Сигма (прописная)
Τ	Τ	`Τ`	Тау (прописная)
Υ	Υ	`Υ`	Ипсилон (прописная)
Φ	Φ	`Φ`	Фи (прописная)
Χ	Χ	`Χ`	Хи (прописная)
Ψ	Ψ	`Ψ`	Пси (прописная)
Ω	Ω	`Ω`	Омега (прописная)
α	α	`α`	Альфа (строчная)
β	β	`β`	Бета (строчная)
γ	γ	`γ`	Гамма (строчная)
δ	δ	`δ`	Дельта (строчная)
ε	ε	`ε`	Эпсилон (строчная)
ζ	ζ	`ζ`	Дзета (строчная)
η	η	`η`	Эта (строчная)
θ	θ	`θ`	Тета (строчная)
ι	ι	`ι`	Иота (строчная)
κ	κ	`κ`	Каппа (строчная)
λ	λ	`λ`	Ламбда (строчная)
μ	μ	`μ`	Мю (строчная)
ν	ν	`ν`	Ню (строчная)
ξ	ξ	`ξ`	Кси (строчная)
ο	ο	`ο`	Омикрон (строчный)
π	π	`π`	Пи (строчная)
ρ	ρ	`ρ`	Ро (строчная)
ς	ς	`&sigmaf;`	Сигма конечная (строчная)
σ	σ	`σ`	Сигма (строчная)
τ	τ	`τ`	Тау (строчная)
υ	υ	`υ`	Ипсилон (строчная)
φ	φ	`φ`	Фи (строчная)
χ	χ	`χ`	Хи (строчная)
ψ	ψ	`ψ`	Пси (строчная)
ω	ω	`ω`	Омега (строчная)
ϑ	ϑ	`&thetasym;`	Тета (строчная)
ϒ	ϒ	`&upsih;`	Ипсилон с крючком
ϖ	ϖ	`ϖ`	Пи

меню

Дерево папок


├──	├──
└──	└──

Источник

https://doremifaso.ca/archives/unicode/unicode.php?start=25A0&end=25FF

Статьи до этого: HTML

Как запустить обработку формы используя JavaScript

❮ Получаем несколько соседних записей одним запросом

Объектный кэш в WordPress ❯