100+ Универсальных Юникод Символов для HTML/CSS/JS/PHP

# 100+ Юникод Символов Для HTML/CSS/JS/PHP

В этой статье мы рассмотрим универсальные символы Юникод, которые понимаются всеми браузерами и системами.

## Зачем Нужны Символы Юникод?

Чтобы использовать иконки в HTML-коде (разметке), обычно устанавливаются пакеты иконок на основе шрифтов, например, Font Awesome. Однако гораздо удобнее вставить известный символ Юникод прямо в браузер, не подключая дополнительные шрифты. В этой статье мы исследуем такие символы.

Браузеры имеют встроенные библиотеки доступных иконок и знаков. Они доступны в формате Юникод — это стандарт, к��торый присваивает уникальные идентификаторы каждой специальной символике. Количество таких символов (иконок, знаков) постоянно растет, и на данный момент их более 110,000. Однако не все символы понимают браузеры. Браузеры работают с иконками, установленными в вашей системе: Windows, Linux, OS X, Android и iOS.

В этой статье собраны иконки, которые доступны во всех системах, что делает их универсальными: в 99% случаев любой браузер будет понимать и отображать их (хотя они могут выглядеть немного по-разному).

---

### Поиск Символов

Вы можете искать символы на следующих сайтах:
- **Graphemica**
- **w3schools.com**

## Как Использовать Символы Юникод

Символы, представленные в таблицах ниже, это обычные символы, которые можно просто скопировать и вставить как текст. Однако если кодировка файла (HTML/CSS), куда вставляется символ, не UTF-8, символ не отобразится и будет потерян. Поэтому в таблицах предоставлен HTML-код символа.

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

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

Вот пример использования кода символа в разных языках программирования:

| Язык              | Код              |
|-------------------|------------------|
| CSS               | 25D1         |
| JavaScript / JSON | u25D1        |
| C / C++ / Java / Python | u25D1 |
| Perl              | x{25D1}      |
| Ruby              | u{25D1}      |

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

## Содержание

- Иконки
- Стрелки
- Кавычки
- Специальные
- Валюта
- Погода
- Указатели
- Доли
- Римские цифры
- Математика
- Карты
- Шахматы
- Дерево папок

## ИКОНКИ

| Символ | Десятичная Сущность | CSS Имя        |
|--------|----------------------|-----------------|
| 😊     | ☺             | ( 263A )     | Улыбка         |
| ♨️     | ♨             | ( 2668 )     | Горячие источники |
| ➑     | ➑            | ( 2791 )     | 8-ка           |
| ⭐️     | ★             | ( 2605 )     | Чёрная звезда   |

**Иконки для примера:**
```html
Вот пара иконок: ☺ ♨

СТРЕЛКИ

Пример использования стрелки:

Нажмите сюда: →

КАВЫЧКИ

Пример использования кавычек:

Цитата: «Цитата»

СПЕЦИАЛЬНЫЕ СИМВОЛЫ

Специальные символы пример:

Авторское право: ©

ВАЛЮТА

ПОГОДА

УКАЗАТЕЛИ

Доли

РИМСКИЕ ЦИФРЫ

МАТЕМАТИКА

КАРТЫ

ШАХМАТЫ

ДЕРЕВО ПАПОК

КАК ПОКАЗАТЬ ИКОНКИ КАК ТЕКСТ

Чтобы браузеры показывали иконки как текст, а не как Эмодзи, нужно добавить специальный символ после иконки. Это поможет отобразить обе иконки как один глиф. Например:

🔒 = 🔒︎

Однако это не работает со всеми иконками. Например, сложные символы могут не поддерживаться.

Заключение

Используя символы Юникод, вы можете значительно упростить создание интерфейсов и сделать ваш контент более выразительным. Надеемся, что эта статья поможет вам в работе с HTML, CSS, JavaScript и другими языками.