У цій нотатці мова йтиме про універсальні Unicode-символи. Іконки, які розуміють всі браузери та системи.
Для того щоб використовувати іконки в коді HTML (верстці), зазвичай встановлюються пакети іконок на базі шрифтів, наприклад Font Awesome . Однак часто зручніше вставити відомий браузеру Unicode-символ і не підключати зайві шрифти. Розглянемо такі символи у цій нотатці.
У браузерах є вбудовані бібліотеки доступних іконок та ієрогліфів. Доступні вони в форматі Unicode — це стандарт, який надає унікальний ідентифікатор для кожного спеціального символу. Число таких символів (іконок, значків) постійно зростає і сьогодні їх понад 110 тисяч . Але не всі браузери розуміють усі такі символи. Браузери працюють на базі іконок, які доступні у вашій системі: Windows, Linux, OS X, Android та iOS. У цій нотатці зібрані іконки, які встановлені у всіх таких системах, а значить можна сказати, що вони універсальні та їх у 99% випадків зрозуміє та відобразить будь-який браузер.
Як використовувати 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 {25D1}
Значки по суті є звичайним текстом, тому можна вказати стилі тексту: тінь, розмір, колір тощо.
Значок
Decimal
Entity
css
Назва
☺
& # 9786; 263A Посмішка
♨
& # 9832; 2668 Хот-спрінгс
➑
➑ 2791 8-м’яч
☆
& # 9734; 2606 Біла зірка
★
& # 9733; 2605 Чорна зірка
✪
& # 10026; 272A Біла зірка обведена
✰
& # 10032; 2730 Біла зірка
✧
& # 10023; 2727 Біла чотирикінцева зірка
✦
& # 10022; 2726 Чорна чотирикінцева зірка
♡
& # 9825; 2661 Біле серце
❤
& # 10084; 2764 Чорне серце
✈
& # 9992; 2708 Літак
✂
✂ 2702 Чорні ножиці
✄
✄ 2704 Білі ножиці
♕
& # 9813; 2655 Корона
✝
✝ 271D Хрест
†
& # 8224; † 2020 Кинжал
‡
& # 8225; ‡ 2021 Подвійний Кинжал
◑
& # 9681; 25D1 Чорно-біле коло
♪
& # 9834; 266A Нота
♫
& # 9835; 266B Переклад
✣
✣ 2723 Чотири зірочки з кулями
☑
& # 9745; 2611 Чекбокс із галочкою
✔
✔ 2714 Галочка
✘
✘ 2718 Хрестик
╳
& # 9587; –
2573 Квадратний хрестик
✎
✎ 270E Олівець
✍
✍ 270D Рука, що пише
♀
& # 9792; 2640 Жінка
♂
& # 9794; 2642 Чоловік
☎
& # 9742; 260E Чорний телефон
☏
& # 9743; 260F Білий телефон
✉
✉ 2709 Конверт
✆
✆ 2706 Знак телефону
Значок
Decimal
Entity
css
Назва
←
& # 8592; ← 2190 Стрілка вліво
→
& # 8594; → 2192 Стрілка праворуч
↑
& # 8593; ↑ 2191 Стрілка вгору
↓
& # 8595; ↓ 2193 Стрілка вниз
↔
& # 8596; ↔ 2194 Стрілка вліво вправо
↕
& # 8597; –
2195 Стрілка вгору вниз
⇄
& # 8644; –
21C4 Стрілки вправо та вліво
⇅
& # 8645; –
21C5 Стрілки вгору та вниз
↲
& # 8626; –
21B2 Вниз-вліво 90 градусів
↳
& # 8627; –
21B3 Стрілка вниз-вправо 90 градусів
↱
& # 8625; –
21B1 Стрілка вгору-вправо 90 градусів
⇤
& # 8676; –
21E4 Стрілка вліво до смуги
↶
& # 8630; –
21B6 Півколо проти годинникової стрілки
↷
& # 8631; –
21B7 Півколо за годинниковою стрілкою
↺
& # 8634; –
21BA Коло проти годинникової стрілки
↻
& # 8635; –
21BB Коло за годинниковою стрілкою
➔
& # 10132; –
2794 Ширококутна стрілка праворуч
↯
& # 8623; –
21AF Зигзагоподібна стрілка вниз
↖
& # 8598; –
2196 Стрілка Північного Заходу
➘
➘ –
2798 Важка південно-східна стріла
➙
➙ –
2799 Важка стрілка праворуч
➚
➚ –
279A Важка північно-східна стріла
➟
➟ –
279F Пунктирна стрілка праворуч
⇠
& # 8672; –
21E0 Пунктирна стрілка вліво
➤
➤ –
27A4 Чорна стрілка праворуч
▶
& # 9654; –
25B6 Стрілка праворуч (max)
◀
& # 9664; –
25C0 Стрілка вліво (max)
▲
& # 9650; –
25B2 Стрілка вгору (max)
▼
& # 9660; –
25BC Стрілка вниз (max)
▸
& # 9656; –
25B8 Стрілка праворуч (min)
◂
& # 9666; –
25C2 Стрілка вліво (min)
▴
& # 9652; –
25B4 Стрілка нагору (min)
▾
& # 9662; –
25BE Стрілка вниз (min)
►
& # 9658; –
25BA Стрілка праворуч (подовжена)
◄
& # 9668; –
25C4 Стрілка вліво (подовжена)
▷
& # 9655; –
25B7 Білий покажчик праворуч
◁
& # 9665; –
25C1 Білий покажчик вліво
△
& # 9651; –
25B3 Білий покажчик вгору
▽
& # 9661; –
25BD Білий покажчик вниз
⇦
& # 8678; –
21E6 Біла стрілка вліво
⇨
& # 8680; –
21E8 Біла стрілка праворуч
⇒
& # 8658; ⇒ 21D2 Подвійна стрілка праворуч
⇐
& # 8656; ⇐ 21D0 Подвійна стрілка вліво
⇑
& # 8657; ⇑ 21D1 Подвійна стрілка вгору
⇓
& # 8659; ⇓ 21D3 Подвійна стрілка вниз
⇔
& # 8660; ⇔ 21D4 Подвійна стрілка вліво-вправо
↵
& # 8629; ↵ 21B5 Повернення каретки
Значок
Decimal
Entity
css
Назва
«
« « 0AB Лапки зліва
»
» » 0BB Кавичок праворуч
‘
& # 8216; ‘ 2018 Відкриваюча одинарна лапка
‘
& # 8217; ’ 2019 Закриваюча одинарна лапка
В
& # 8218; ‚ 201A Нижня одинарна лапка
“
& # 8220; “ 201C Відкриваюча подвійна лапка
”
& # 8221; ” 201D Подвійна лапка, що закриває
„
& # 8222; „ 201E Нижня подвійна лапка
′
& # 8242; ′ 2032 Штрих, хвилини, лапка
″
& # 8243; ″ 2033 Подвійний штрих
‴
& # 8244; –
2034 Потрійний штрих
Значок
Decimal
Entity
css
Назва
№
& # 8470; –
2116 Номер
©
© © 0A9 Авторське право
®
® ® 0AE Зареєстрований
™
& # 8482; ™ 2122 Товарний знак
℮
& # 8494; –
212E Ймовірний
·
· · 0B7 Середня точка (Маркер списку)
•
& # 8226; • 2022 Крапка
■
& # 9632; –
25A0 Чорний квадрат
□
& # 9633; –
25A1 Білий квадрат
–
& # 8212; — 2014 Довге тире
‰
& # 8240; ‰ 2030 Знак проміле
…
& # 8230; … 2026 Багатокрапка
¶
¶ ¶ 0B6 Знак абзацу
Значок
Decimal
Entity
css
Назва
₽
& # 8381; –
020BD Рубль (правий Alt+8)
€
& # 8364; € 020AC Євро
£
£ £ 0A3 фунт
₤
& # 8356; –
20A4 Ліра
¥
¥ ¥ 0A5 Єна
¢
¢ ¢ 0A2 Цент
¤
¤ ¤ 0A4 Валюта
Значок
Decimal
Entity
css
Назва
°
° ° 0B0 Градус
☀
& # 9728; –
2600 Сонце маленьке
☼
& # 9788; –
263C Сонце велике
☁
& # 9729; –
2601 Хмара
❆
& # 10054; –
2746 Сніжинка 1
❅
& # 10053; –
2745 Сніжинка 2
❄
& # 10052; –
2744 Сніжинка 3
Значок
Decimal
Entity
css
Назва
☚
& # 9754; –
261A Вказівник Ліворуч чорний
☛
& # 9755; –
261B Вказівник Вправо чорний
☜
& # 9756; –
261C Вказівник Лівий білий
☝
& # 9757; –
261D Вказівник Вгору білий
☞
& # 9758; –
261E Вказівник Вправо білий
☟
& # 9759; –
261F Вказівник Вниз білий
Значок
Decimal
Entity
css
Назва
½
½ ½ 0BD Половина (1/2)
¼
¼ ¼ 0BC Чверть (1/4)
¾
¾ ¾ 0BE Три чверті (3/4)
⅓
& # 8531; –
2153 Одна третина (1/3)
⅔
& # 8532; –
2154 Дві третини (2/3)
⅛
& # 8539; –
215B Одна восьма (1/8)
⅜
& # 8540; –
215C Три восьми (3/8)
⅝
& # 8541; –
215D П’ять восьмих (5/8)
⅞
& # 8542; –
215E Сім восьмих (7/8)
Значок
Decimal
Entity
css
Назва
Ⅰ
& # 8544; –
2160 Один (римська цифра)
Ⅱ
& # 8545; –
2161 Два (римська цифра)
Ⅲ
& # 8546; –
2162 Три (римська цифра)
Ⅳ
& # 8547; –
2163 Чотири (римська цифра)
Ⅴ
& # 8548; –
2164 П’ять (римська цифра)
Ⅵ
& # 8549; –
2165 Шість (римська цифра)
Ⅶ
& # 8550; –
2166 Сім (римська цифра)
Ⅷ
& # 8551; –
2167 Вісім (римська цифра)
Ⅸ
& # 8552; –
2168 Дев’ять (римська цифра)
Ⅹ
& # 8553; –
2169 Десять (римська цифра)
Ⅺ
& # 8554; –
216A Одинадцять (римська цифра)
Ⅻ
& # 8555; –
216B Дванадцять (римська цифра)
Значок
Decimal
Entity
css
Назва
∞
& # 8734; ∞ 221E Нескінченність
±
± ± 0B1 Плюс мінус
≅
& # 8773; ≅ 2245 Приблизно одно
≈
& # 8776; ≈ 2248 Асимптотично одно
≠
& # 8800; ≠ 2260 Не дорівнює
≡
& # 8801; ≡ 2261 Тотожно
≤
& # 8804; ≤ 2264 Менше або дорівнює
≥
& # 8805; ≥ 2265 Більше або дорівнює
÷
÷ ÷ 0F7 Поділ
×
× × 0D7 Множення х
✖
& # 10006; –
2716 Тяжке множення x
¹
¹ ¹ 0B9 Один (верхній індекс)
²
² ² 0B2 Два (верхній індекс)
³
³ ³ 0B3 Три (верхній індекс)
⊕
& # 8853; ⊕ 2295 Пряма сума
⊗
& # 8855; ⊗ 2297 Векторний витвір
∏
& # 8719; ∏ 220F N-арний твір
∑
& # 8721; ∑ 2211 N-арна сума (Сігма)
∅
& # 8709; ∅ 2205 Порожня безліч. Діаметр.
∠
& # 8736; ∠ 2220 Кут
ч
& # 8741; –
2225 Паралельно
⊥
& # 8869; ⊥ 22A5 Перпендикулярно
△
& # 9651; –
25B3 Трикутник
○
& # 9675; –
25CB Коло
□
& # 9633; –
25A1 Квадрат
‾
& # 8254; ‾ 203E Надкреслення
⁄
& # 8260; ⁄ 2044 Дробова риса
Значок
Decimal
Entity
css
Назва
√
& # 8730; √ 221A Радикал
∝
& # 8733; ∝ 221D Пропорційно
∩
& # 8745; ∩ 2229 Перетин
∪
& # 8746; ∪ 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
Название
Δ
Δ Δ 394 Дельта (прописная)
ƒ
ƒ ƒ 192 Курсивное f
Α
Α Α 391 Альфа (прописная)
Β
Β Β 392 Бета (прописная)
Γ
Γ Γ 393 Гамма (прописная)
Ε
Ε Ε 395 Эпсилон (прописной)
Ζ
Ζ Ζ 396 Дзета (прописная)
Η
Η Η 397 Эта (прописная)
Θ
Θ Θ 398 Тета (прописная)
Ι
Ι Ι 399 Иота (прописная)
Κ
Κ Κ 39A Каппа (прописная)
Λ
Λ Λ 39B Ламбда (прописная)
Μ
Μ Μ 39C Мю (прописная)
Ν
Ν Ν 39D Ню (прописная)
Ξ
Ξ Ξ 39E Кси (прописная)
Ο
Ο Ο 39F Омикрон (прописной)
Π
Π Π 3A0 Пи (прописная)
Ρ
Ρ Ρ 3A1 Ро (прописная)
Σ
Σ Σ 3A3 Сигма (прописная)
Τ
Τ Τ 3A4 Тау (прописная)
Υ
Υ Υ 3A5 Ипсилон (прописная)
Φ
Φ Φ 3A6 Фи (прописная)
Χ
Χ Χ 3A7 Хи (прописная)
Ψ
Ψ Ψ 3A8 Пси (прописная)
Ω
Ω Ω 3A9 Омега (прописная)
α
α α 3B1 Альфа (строчная)
β
β β 3B2 Бета (строчная)
γ
γ γ 3B3 Гамма (строчная)
δ
δ δ 3B4 Дельта (строчная)
ε
ε ε 3B5 Эпсилон (строчная)
ζ
ζ ζ 3B6 Дзета (строчная)
η
η η 3B7 Эта (строчная)
θ
θ θ 3B8 Тета (строчная)
ι
ι ι 3B9 Иота (строчная)
κ
κ κ 3BA Каппа (строчная)
λ
λ λ 3BB Ламбда (строчная)
μ
μ μ 3BC Мю (строчная)
ν
ν ν 3BD Ню (строчная)
ξ
ξ ξ 3BE Кси (строчная)
ο
ο ο 3BF Омикрон (строчный)
π
π π 3C0 Пи (строчная)
ρ
ρ ρ 3C1 Ро (строчная)
ς
ς ς 3C2 Сигма конечная (строчная)
σ
σ σ 3C3 Сигма (строчная)
τ
τ τ 3C4 Тау (строчная)
υ
υ υ 3C5 Ипсилон (строчная)
φ
φ φ 3C6 Фи (строчная)
χ
χ χ 3C7 Хи (строчная)
ψ
ψ ψ 3C8 Пси (строчная)
ω
ω ω 3C9 Омега (строчная)
ϑ
ϑ ϑ 3D1 Тета (строчная)
ϒ
ϒ ϒ 3D2 Ипсилон с крючком
ϖ
ϖ ϖ 3D6 Пи
Иконка
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
Например:
????
????︎ = ????︎
☝
☝︎ = ☝︎
Однако он работает не со всеми иконками:
✍
✍️︎ = ✍︎
Подробнее:
Интересные видео
