WordPress как на ладони
rgbcode is looking for WordPress developers. Очень Удобный и Быстрый Хостинг для сайтов на WordPress. Пользуюсь сам и вам рекомендую!

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/CSS) куда вставляется скопированный значок не UTF-8 вставленный значок отображаться не будет, более того — он потеряется. Для таких случаев в таблице приведён HTML код знака.

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

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

Использование кода иконки в разных языках. Например UTF8 код ◑ = 25D1, тогда:

CSS                      \25D1
JavaScript / JSON        \u25D1
C / C++ / Java / Python  \u25D1
Perl                     \x{25D1}
Ruby                     \u{25D1}

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

Иконки

Иконка 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. Тогда обе эти иконки будут рендерится как один глиф.

Например:

🔒
🔒︎ = 🔒︎

☝
☝︎ = ☝︎

Однако он работает не со всеми иконками:

✍
✍️︎ = ✍︎

Подробнее:

Видео по теме

  • Webtarget

    Webtarget - разработка и поддержка сайтов на Wordpress

    webtt.ru

9 комментариев
    Войти