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:'★' .
Значки по сути являются обычным текстом, поэтому им можно указать стили текста: тень, размер, цвет и т.д.
Иконки
Мин
Макс
HTML-код
Название
☺
☺
☺
Улыбка
♨
♨
♨
Хот-спрингс
➑
➑
➑
8-мяч
☆
☆
☆
Белая звезда
★
★
★
Черная звезда
✪
✪
✪
Белая звезда обведенная
✰
✰
✰
Белая звезда
✧
✧
✧
Белая четырехконечная звезда
✦
✦
✦
Черная четырехконечная звезда
♡
♡
♡
Белое сердце
❤
❤
❤
Черное сердце
✈
✈
✈
Самолет
✂
✂
✂
Черные ножницы
✄
✄
✄
Белые ножницы
♕
♕
♕
Корона
✝
✝
✝
Крест
†
†
†
Кинжал
‡
‡
‡
Двойной Кинжал
◑
◑
◑
Черно-белый круг
♪
♪
♪
Нота
♫
♫
♫
Ноты
✣
✣
✣
Четыре звездочки с шарами
☑
☑
☑
Чекбокс с галочкой
✔
✔
✔
Галочка
✘
✘
✘
Крестик
✎
✎
✎
Карандаш
✍
✍
✍
Пишущая рука
♀
♀
♀
Женщина
♂
♂
♂
Мужчина
☎
☎
☎
Черный телефон
☏
☏
☏
Белый телефон
✉
✉
✉
Конверт
✆
✆
✆
Знак телефона
меню
Стрелки
Мин
Макс
HTML-код
Название
←
←
←
←
Стрелка влево
→
→
→
→
Стрелка вправо
↑
↑
↑
↑
Стрелка вверх
↓
↓
↓
↓
Стрелка вниз
↔
↔
↔
↔
Стрелка влево вправо
↕
↕
↕
Стрелка вверх вниз
⇄
⇄
⇄
Стрелки вправо и влево
⇅
⇅
⇅
Стрелки вверх и вниз
↲
↲
↲
Вниз-влево 90 градусов
↳
↳
↳
Стрелка вниз-вправо 90 градусов
↱
↱
↱
Стрелка вверх-вправо 90 градусов
⇤
⇤
⇤
Стрелка влево к полосе
↶
↶
↶
Полукруг против часовой стрелки
↷
↷
↷
Полукруг по часовой стрелке
↺
↺
↺
Круг против часовой стрелки
↻
↻
↻
Круг по часовой стрелке
➔
➔
➔
Широкоугольная стрелка вправо
↯
↯
↯
Зигзагообразная стрелка вниз
↖
↖
↖
Стрелка Северо-Запада
➘
➘
➘
Тяжелая юго-восточная стрела
➙
➙
➙
Тяжелая стрелка вправо
➚
➚
➚
Тяжелая северо-восточная стрела
➟
➟
➟
Пунктирная стрелка вправо
⇠
⇠
⇠
Пунктирная стрелка влево
➤
➤
➤
Черная стрелка вправо
⇦
⇦
⇦
Белая стрелка влево
⇨
⇨
⇨
Белая стрелка вправо
►
►
►
Правый черный указатель
◀
◀
◀
Левый черный указатель
▲
▲
▲
Черный указатель вверх
▷
▷
▷
Правый белый указатель
◁
◁
◁
Левый белый указатель
△
△
△
Белый указатель вверх
⇐
⇐
⇐
Двойная стрелка влево
⇑
⇑
⇑
Двойная стрелка вверх
⇒
⇒
⇒
Двойная стрелка вправо
⇓
⇓
⇓
Двойная стрелка вниз
⇔
⇔
⇔
Двойная стрелка влево-вправо
↵
↵
↵
Возврат каретки
меню
Кавычки
Мин
Макс
HTML-код
Название
«
«
«
Кавычки слева
»
»
»
Кавычек справа
‘
‘
‘
Открывающая одинарная кавычка
’
’
’
Закрывающая одинарная кавычка
‚
‚
‚
Нижняя одинарная кавычка
“
“
“
Открывающая двойная кавычка
”
”
”
Закрывающая двойная кавычка
„
„
„
Нижняя двойная кавычка
меню
Специальные
Мин
Макс
HTML-код
Название
№
№
№
Номер
©
©
©
Авторское право
®
®
®
Зарегистрированный
™
™
™
Товарный знак
℮
℮
℮
Предполагаемый
•
•
•
•
Точка (Маркер списка)
·
·
·
Средняя Точка (Маркер списка)
—
—
—
Длинное тире
‰
‰
‰
Знак промилле
…
…
…
Многоточие
меню
Валюта
Мин
Макс
HTML-код
Название
€
€
€
Евро
£
£
£
Фунт
₤
₤
₤
Лира
¥
¥
¥
Иена
¢
¢
¢
Цент
¤
¤
¤
Валюта
меню
Погода
Мин
Макс
HTML-код
Название
°
°
°
Градус
☀
☀
☀
Солнце маленькое
☼
☼
☼
Солнце большое
☁
☁
☁
Облако
❆
❆
❆
Снежинка 1
❅
❅
❅
Снежинка 2
❄
❄
❄
Снежинка 3
меню
Указатели
Мин
Макс
HTML-код
Название
☚
☚
☚
Указатель Влево черный
☛
☛
☛
Указатель Вправо черный
☜
☜
☜
Указатель Левый белый
☝
☝
☝
Указатель Вверх белый
☞
☞
☞
Указатель Вправо белый
☟
☟
☟
Указатель Вниз белый
меню
Карты
Мин
Макс
HTML-код
Название
♠
♠
♠
Пики черные
♥
♥
♥
Сердце черные
♦
♦
♦
Буби черные
♣
♣
♣
Крести черные
♤
♤
♤
Пики белые
♡
♡
♡
Сердце белые
♢
♢
♢
Буби белые
♧
♧
♧
Крести белые
меню
Шахматы
Мин
Макс
HTML-код
Название
♔
♔
♔
Король белый
♕
♕
♕
Ферзь белый
♖
♖
♖
Ладья белая
♗
♗
♗
Слон белый
♘
♘
♘
Конь белый
♙
♙
♙
Пешка белая
♚
♚
♚
Король черный
♛
♛
♛
Ферзь черный
♜
♜
♜
Ладья черная
♝
♝
♝
Слон черный
♞
♞
♞
Конь черный
♟
♟
♟
Пешка черная
меню
Фракции
Мин
Макс
HTML-код
Мнемоника
Название
¼
¼
¼
¼
Четверть (1/4)
½
½
½
½
Половина (1/2)
¾
¾
¾
¾
Три четверти (3/4)
⅓
⅓
⅓
⅓
Одна треть (1/3)
⅔
⅔
⅔
⅔
Две трети (2/3)
⅛
⅛
⅛
⅛
Одна восьмая (1/8)
⅜
⅜
⅜
⅜
Три восьмых (3/8)
⅝
⅝
⅝
⅝
Пять восьмых (5/8)
⅞
⅞
⅞
⅞
Семь восьмых (7/8)
меню
Римские цифры
Мин
Макс
HTML-код
Название
Ⅰ
Ⅰ
Ⅰ
Один (римская цифра)
Ⅱ
Ⅱ
Ⅱ
Два (римская цифра)
Ⅲ
Ⅲ
Ⅲ
Три (римская цифра)
Ⅳ
Ⅳ
Ⅳ
Четыре (римская цифра)
Ⅴ
Ⅴ
Ⅴ
Пять (римская цифра)
Ⅵ
Ⅵ
Ⅵ
Шесть (римская цифра)
Ⅶ
Ⅶ
Ⅶ
Семь (римская цифра)
Ⅷ
Ⅷ
Ⅷ
Восемь (римская цифра)
Ⅸ
Ⅸ
Ⅸ
Девять (римская цифра)
Ⅹ
Ⅹ
Ⅹ
Десять (римская цифра)
Ⅺ
Ⅺ
Ⅺ
Одиннадцать (римская цифра)
Ⅻ
Ⅻ
Ⅻ
Двенадцать (римская цифра)
меню
Математика
Мин
Макс
HTML-код
Название
∞
∞
∞
∞
Бесконечность
±
±
±
Плюс-минус
≅
≅
≅
Приблизительно равно
≈
≈
≈
≈
Асимптотически равно
≠
≠
≠
≠
Не равно
≡
≡
≡
Тождественно равно
≤
≤
≤
≤
Меньше или равно
≥
≥
≥
≥
Больше или равно
÷
÷
÷
Деление
×
×
×
Умножение х
✖
✖
✖
Тяжелое умножение x
¹
¹
¹
Один (верхний индекс)
²
²
²
Два (верхний индекс)
³
³
³
Три (верхний индекс)
⊕
⊕
⊕
⊕
Прямая сумма
⊗
⊗
⊗
⊗
Векторное произведение
∏
∏
∏
N-арное произведение
∑
∑
∑
∑
N-арная сумма (Сигма)
∅
∅
∅
Пустое множество. Диаметр.
∠
∠
∠
∠
Угол
∥
∥
∥
Параллельно
⊥
⊥
⊥
⊥
Перпендикулярно
△
△
△
Треугольник
○
○
○
Круг
□
□
□
Квадрат
‾
‾
‾
Надчеркивание
⁄
⁄
⁄
Дробная черта
√
√
√
Радикал
∝
∝
∝
Пропорционально
∩
∩
∩
Пересечение
∪
∪
∪
Объединение
∫
∫
∫
Интеграл
∴
∴
∴
Следовательно
∼
∼
∼
Оператор тильда
⊂
⊂
⊂
Подмножество
⊃
⊃
⊃
Надмножество
⊄
⊄
⊄
Не подмножество
⊆
⊆
⊆
Подмножество или равно
⊇
⊇
⊇
Надмножество или равно
∧
∧
∧
∧
Логичское И
∨
∨
∨
∨
Логичское ИЛИ
′
′
′
Знак прим
″
″
″
Знак двойной прим
ℑ
ℑ
ℑ
Мнимая часть числа
ℜ
ℜ
ℜ
Действительная часть числа
ℵ
ℵ
ℵ
Алеф
∀
∀
∀
Квантор всеобщности
∃
∃
∃
Квантор существования
∂
∂
∂
Дифференциал
∇
∇
∇
Набла
∈
∈
∈
Принадлежит множеству
∉
∉
∉
Не принадлежит множеству
∋
∋
∋
Является членом
ƒ
ƒ
ƒ
Курсивное f
Α
Α
Α
Альфа (прописная)
Β
Β
Β
Бета (прописная)
Γ
Γ
Γ
Гамма (прописная)
Δ
Δ
∆
Δ
Дельта (прописная)
Ε
Ε
Ε
Эпсилон (прописной)
Ζ
Ζ
Ζ
Дзета (прописная)
Η
Η
Η
Эта (прописная)
Θ
Θ
Θ
Тета (прописная)
Ι
Ι
Ι
Иота (прописная)
Κ
Κ
Κ
Каппа (прописная)
Λ
Λ
Λ
Ламбда (прописная)
Μ
Μ
Μ
Мю (прописная)
Ν
Ν
Ν
Ню (прописная)
Ξ
Ξ
Ξ
Кси (прописная)
Ο
Ο
Ο
Омикрон (прописной)
Π
Π
Π
Пи (прописная)
Ρ
Ρ
Ρ
Ро (прописная)
Σ
Σ
Σ
Сигма (прописная)
Τ
Τ
Τ
Тау (прописная)
Υ
Υ
Υ
Ипсилон (прописная)
Φ
Φ
Φ
Фи (прописная)
Χ
Χ
Χ
Хи (прописная)
Ψ
Ψ
Ψ
Пси (прописная)
Ω
Ω
Ω
Омега (прописная)
α
α
α
Альфа (строчная)
β
β
β
Бета (строчная)
γ
γ
γ
Гамма (строчная)
δ
δ
δ
Дельта (строчная)
ε
ε
ε
Эпсилон (строчная)
ζ
ζ
ζ
Дзета (строчная)
η
η
η
Эта (строчная)
θ
θ
θ
Тета (строчная)
ι
ι
ι
Иота (строчная)
κ
κ
κ
Каппа (строчная)
λ
λ
λ
Ламбда (строчная)
μ
μ
μ
Мю (строчная)
ν
ν
ν
Ню (строчная)
ξ
ξ
ξ
Кси (строчная)
ο
ο
ο
Омикрон (строчный)
π
π
π
Пи (строчная)
ρ
ρ
ρ
Ро (строчная)
ς
ς
ς
Сигма конечная (строчная)
σ
σ
σ
Сигма (строчная)
τ
τ
τ
Тау (строчная)
υ
υ
υ
Ипсилон (строчная)
φ
φ
φ
Фи (строчная)
χ
χ
χ
Хи (строчная)
ψ
ψ
ψ
Пси (строчная)
ω
ω
ω
Омега (строчная)
ϑ
ϑ
ϑ
Тета (строчная)
ϒ
ϒ
ϒ
Ипсилон с крючком
ϖ
ϖ
ϖ
Пи
-
Источник