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';.

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

Оглавление:

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

Иконки

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

меню

Стрелки

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

меню

Кавычки

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

меню

Специальные

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

меню

Валюта

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

меню

Погода

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

меню

Указатели

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

меню

Карты

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

меню

Шахматы

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

меню

Фракции

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

меню

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

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

меню

Математика

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

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

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

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

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

меню

Дерево папок

Мин	Макс	HEX	HTML	Entity
├──	├──
└──	└──

Источник
Ищите символы на сайте G r a p h e m i c a

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

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

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

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