Отображение символа галочки в HTML без изображений: решение

Быстрый ответ

Если вам требуется символ галочки в HTML, воспользуйтесь следующими вариантами:

• HTML-сущность: ✓ (✓)
• Шестнадцатеричное представление Unicode-символа: ✓ (✓)
• Десятичное представление Unicode-символа: ✓ (✓)

Скопируйте этот фрагмент кода в нужное место вашего документа:

✓ ✓ ✓

На веб-странице эти символы отобразятся как: ✓ ✓ ✓

Кроссбраузерная совместимость и использование Unicode

Символы Unicode обеспечивают широкую кроссбраузерную совместимость, поэтому символ галочки отобразится корректно почти в любом браузере. Примеры: ☐ для неотмеченного чекбокса и ☑ для отмеченного. Самыми популярными символами галочки являются ✓ и ✔. Важно указывать кодировку UTF-8, чтобы избежать проблем с отображением символов:

<meta charset="UTF-8">

Выбираем шрифты и библиотеки

Не все шрифты поддерживают символы галочек. Чтобы избежать проблем, используйте шрифты, такие как Arial Unicode MS и Lucida Grande. Если ваш сайт должен поддерживать устаревшие браузеры, такие как Internet Explorer 6, используйте чекбокс только для чтения:

<input type="checkbox" checked onclick="return false;">

А если вы стремитесь к единообразию визуальных элементов, попробуйте иконки из библиотеки Font Awesome:

<i class="fas fa-check"></i>

Встраиваем галочку стильно

Универсальный доступ: Никого не оставляем за бортом

Чтобы скринридеры корректно воспроизводили символы галочек и обеспечивала доступность вашего веб-контента, используйте HTML-сущности и улучшайте их восприятие с помощью ARIA:

<span aria-hidden="true">&check;</span><span class="visually-hidden">Завершено</span>

Подробнее об этом расскажет наш спикер на видео

Цвета и типографика: Привлекаем внимание

Цвет и шрифт символа галочки играют важную роль. Они подбираются в зависимости от контекста. Например, для обозначения положительного результата часто используют зеленый цвет:

<span style="color:#28a745;">&check;</span>

Альтернативные символы: План Б обязателен

Если выбранный вами символ отображается некорректно, готовьтесь к использованию графических иконок, CSS-форм или других символов, например ☒.

<span>&#10060;</span>

Исправляем проблемы с отображением галочек

Устраняем разногласия между браузерами и шрифтами

Каждый браузер интерпретирует символы по-своему, поэтому разработчику приходится использовать определенные приемы:

• Применяйте веб-безопасные шрифты.
• Заменяйте текстовые символы на SVG-иконки.
• Используйте CSS псевдоэлементы и фоновые изображения.

Масштабируем для разных устройств

Символы галочек должны корректно отображаться на всех устройствах. SVG или шрифты от Font Awesome помогут вам в этом.

Поддерживаем устаревшие системы

Для поддержки старых систем используйте изображения, хотя они и менее масштабируемы.

Исправляем проблемы с кодировкой символов

Убедитесь в том, что ваш сервер передает корректный заголовок Content-Type с указанием кодировки UTF-8.

Content-Type: text/html; charset=UTF-8

Визуализация

Символ галочки (✓) ассоциируется с точностью и завершенностью. Как саженец, превращающийся в некое растение, так и символ на HTML-странице становится положительным подтверждением для пользователя:

&#10003; <!-- Это скромное начало с уверенностью превратится в отмечающую выполнение задачи галочку! -->

Полезные материалы

1. Специальные символы HTML в Официальном стандарте HTML.
2. Обучение использованию специальных символов в HTML на сайте W3Schools.
3. Подробное описание Unicode символа галочки 'CHECK MARK' (U+2713).
4. Список HTML символов и кодов от Toptal Designers.
5. Иконки галочек от Font Awesome.
6. Руководство по доступности веб-контента (WAI-ARIA) 1.1.
7. Техники создания различных форм с помощью CSS на CSS-Tricks.