У цій нотатці мова йтиме про універсальні 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
Например:
????
????︎ = ????︎
☝
☝︎ = ☝︎
Однако он работает не со всеми иконками:
✍
✍️︎ = ✍︎
Подробнее:
Интересные видео
