Unicode символы на HTML странице

Как указать Unicode-код в content

1. Используйте обратный слэш (\) и шестнадцатеричное значение Unicode-кода.
   Например, символ сердца (❤) имеет Unicode-код U+2764. В CSS это будет выглядеть так:

   content: '\2764';

2. Если Unicode-код длиннее 4 символов, используйте формат \000000.
   Например, для символа "📦" (коробка) с Unicode-кодом U+1F4E6:

   content: '\01F4E6';

Примеры

1. Добавление символа сердца перед текстом

p::before {
  content: '\2764'; /* Символ сердца */
  color: red;
  margin-right: 5px;
}

Результат:
Каждый параграф <p> будет начинаться с красного сердца: ❤ Текст.

2. Добавление символа стрелки после ссылки

a::after {
  content: '\2192'; /* Символ стрелки вправо (→) */
  margin-left: 5px;
  color: blue;
}

Результат:
После каждой ссылки будет добавлена синяя стрелка: Ссылка →.

3. Добавление смайлика "📦" (коробка)

div::before {
  content: '\01F4E6'; /* Символ коробки */
  font-size: 20px;
  margin-right: 10px;
}

Результат:
Перед содержимым каждого <div> будет добавлен символ коробки: 📦 Текст.

Где найти Unicode-коды символов?

1. Официальный сайт Unicode: unicode.org

2. Таблицы символов: Например, Unicode Table.

3. Использование инструментов разработчика в браузере: Вы можете вставить символ на страницу и посмотреть его код через инструменты разработчика.

Важные моменты

1. Шрифт должен поддерживать символ: Если шрифт, используемый на вашем сайте, не поддерживает определенный Unicode-символ, он может отображаться как квадратик или другой placeholder.

2. Экранирование обратного слэша: Если вы используете Unicode-код в JavaScript или других языках, убедитесь, что обратный слэш (\) экранирован правильно.

Итог

Использование Unicode-кодов в свойстве content — это удобный способ добавлять символы, которые могут отсутствовать на клавиатуре или в HTML-разметке. Просто используйте формат \XXXX или \000000, и ваш символ отобразится! 😊