Здравствуйте, дорогие друзья!
Наверняка вы уже сталкивались с задачей вставить к себе на сайт символ стрелочки, конверта, телефонной трубки, копирайта или какой-нибудь другой.
Навигация по статье:
Для решения этой задачи можно воспользоваться одним из иконочных шрифтов, таких как Font Awesome, или же подготовить изображение нужного значка и вставить его на сайт. Однако можно пойти более простым путём. Для этого достаточно чтобы у вас перед глазами была таблица символов utf 8 или, как её ещё называют, таблица символов Unicode.
Кроме того иконки из этой таблицы можно использовать для создания интересных ников на форумах, в социальных сетях или онлайн-играх.
Как это работает?
Смысл использования символов из таблицы UTF8 заключается в том, что у вас в компьютере уже есть все необходимые знаки и ваш браузер может с лёгкостью их отобразить, нужно только знать их специальный код.
Например, символ стрелочка вверх в UTF8 записывается так ↑
Вы можете скопировать эту последовательность знаков и вставить себе в HTML страницу как обычный текст.
После этого у вас на сайте вместо этого набора знаков появится графическое изображение стрелочки. Удобно, не правда ли!?
И не нужно подключать никаких дополнительных шрифтов на ваш сайт ради вставки нескольких символов, а так же готовить и вставлять графические изображения.
Таблица символов UTF8 (Unicode) включает в себя тысячи, а то миллионы различных знаков.
Чтобы вам не приходилось пересматривать огромные таблицы в поисках нужного значка я выбрала наиболее интересные и полезные из них и разбила их по группам.
Символы стрелок в UTF8
| Название | Изображение | Код в UTF8 |
|---|---|---|
| Стрелка влево | ← | ← |
| Стрелка вправо | → | → |
| Стрелка вверх | ↑ | ↑ |
| Стрелка вниз | ↓ | ↓ |
| Двойная стрелка в стороны | ↔ | ↔ |
| Двойная стрелка вврех-вниз | ↕ | ↕ |
| Стрелки влево-вправо | ⇄ | ⇄ |
| Стрелки вверх-вниз | ⇅ | ⇅ |
| Угловая вниз-влево | ↲ | ↲ |
| Угловая вниз-вправо | ↳ | ↳ |
| Угловая вверх-влево | ↰ | ↰ |
| Угловая вверх-вправо | ↱ | ↱ |
| Закруглённая влево | ↶ | ↶ |
| Закруглённая вправо | ↷ | ↷ |
| Круглая вверх-влево | ↺ | ↺ |
| Круглая вверх-вправо | ↻ | ↻ |
| Толстая стрелка вправо | ➔ | ➔ |
| Стрелка зигзаг вниз | ↯ | ↯ |
| Стрелка северо-запад | ↖ | ↖ |
| Толстая юго-запад | ➘ | ➘ |
| Толстая вправо | ➙ | ➙ |
| Толстая северо-восток | ➚ | ➚ |
| Пунктирная стрелка вправо | ➟ | ➟ |
| Точечная стрелка влево | ⇠ | ⇠ |
| Угловатая стрелка вправо | ➤ | ➤ |
| Светлая стрелка влево | ⇦ | ⇦ |
| Светлая стрелка вправо | ⇨ | ⇨ |
| Двойная стрелка влево | « | « |
| Двойная стрелка вправо | » | » |
| Треугольная стрелка вправо | ► | ► |
| Треугольная стрелка влево | ◀ | ◀ |
| Треугольная стрелка вверх | ▲ | ▲ |
| Треугоьная стрелка вниз | ▼ | ▼ |
| Светлый треугольник вправо | ▷ | ▷ |
| Светлый треугольник влево | ◁ | ◁ |
| Светлый треугольник вверх | △ | △ |
| Светый треугольник вниз | ▽ | ▽ |
| Стрела лука | ➴ | ➴ |
Таблица иконок в Unicode
| Название | Изображение | Код в UTF8 |
|---|---|---|
| Тёмный телефон | ☎ | ☎ |
| Светлый телефон | ☏ | ☏ |
| Символ конверт | ✉ | ✉ |
| Теефонная трубка | ✆ | ✆ |
| Часы | ⌚ | ⌚ |
| Галочка в квадрате | ☑ | ☑ |
| Символ галочка | ✔ | ✔ |
| Символ крестик | ✘ | ✘ | Светлая звезда | ☆ | ☆ |
| Тёмная звезда | ★ | ★ |
| Четырёхконечная звезда | ✦ | ✦ |
| Звезда в круге | ✪ | ✪ |
| Светлое сердце | ♡ | ♡ |
| Тёмное сердце | ❤ | ❤ |
| Смайлик | ☺ | ☺ |
| Восклицательный знак | ⚠ | ⚠ |
| Вторичное использоване | ♻ | ♻ |
| Высокое напряжение | ⚡ | ⚡ |
| Чашка кофе | ☕ | ☕ |
| Самолёт | ✈ | ✈ |
| Песочные часы | ⌛ | ⌛ |
| Ножницы | ✂ | ✂ |
| Корона | ♕ | ♕ |
| Якорь | ⚓ | ⚓ |
| Крест | ✝ | ✝ |
| Чёрно-белый круг | ◑ | ◑ |
| Нота | ♪ | ♪ |
| Двойная нота | ♫ | ♫ |
| Карандаш | ✎ | ✎ |
| Пишущая рука | ✍ | ✍ |
| Женский знак | ♀ | ♀ |
| Мужской знак | ♂ | ♂ |
Надеюсь что символов, представленных в этих таблицах будет для вас достаточно и вы сможете обходиться без подключения иконочных шрифтов и графических изображений для вставки нужных вам символов. Если данная статья была для вас полезной, не забудьте оставить комментарий. Спасибо что дочитали статью до конца!
Удачи вам в создании своих сайтов!
С уважением Юлия Гусарь
