Символ галочки в HTML / XHTML

279

Нам нужно отобразить символ галочки (✓ или ✔) во внутреннем веб-приложении, и в идеале мы хотели бы избегать использования изображения.

Должен работать, начиная с IE 6.0.2900, на XP-боксе, в идеале он должен быть кросс-браузерным (IE + последние версии FF).

Следующие поля отображают, хотя устанавливает кодировку браузера в UTF-8 (META работает хорошо, а не проблема). По умолчанию используется шрифт Times New Roman (может быть проблема, но попытка Lucida Sans Unicode не помогает, и у меня не установлены ни Arial Unicode MS, ни Lucida Grande).

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
 &#10003; &#10004;
</body>
</html>

Любая помощь приветствуется.

Следующее работает под IE 6.0 и IE 7:

<html>
<head>

</head>
<body>
 <span style="font-family: wingdings; font-size: 200%;">&#252;</span>
</body>
</html>

Буду признателен, если кто-то может проверить под FF на Windows. Я почти уверен, что он не будет работать на не Windows.

html xhtml

— Влад Гудим
источник

1

Как должен выглядеть тиковый символ?

— Джон Феминелла

Вы видели это: html-faq.com/htmlbasics/?specialcharacters

— Сэм Хаслер

2

Сэм, пожалуйста, взгляни на вопрос.

— Влад Гудим

@Totophil, я знаю, что в нем говорится об одних и тех же объектах, но также предлагается, чтобы сервер отправлял фактический HTTP-заголовок Content-Type: text / html; charset = utf-8, а также проблему, которая может не содержать используемый шрифт глифы для используемых символов.

— Сэм Хаслер

Вот пара: amp-what.com/#q=check%20mark & # x2713 & # x2714

— ndp

454

Я думаю, что вы используете менее хорошо поддерживаемые значения Unicode, которые не всегда имеют глифы для всех точек кода.
Попробуйте следующие символы:

☐ ( 0x2610 в шестнадцатеричном формате Юникода [десятичное HTML: ☐]): пустой (не отмеченный) флажок
☑ ( 0x2611 [HTML десятичный: ☑]): проверенная версия предыдущего флажка
✓ ( 0x2713 [десятичный HTML: ✓])
✔ ( 0x2714 [десятичный HTML: ✔])

Изменить: Кажется, есть некоторая путаница в отношении первого символа здесь, ☐ / 0x2610. Это пустой (не отмеченный) флажок, поэтому, если вы видите поле, оно должно выглядеть так. Это аналог ☑ / 0x2611, который является проверенной версией.

— Джон Феминелла
источник

1

Корпоративная настройка: Win XP Professional + IE 6.0.2900.2180.xpsp_sp2_qfe.070227-2300

— Влад Гудим

Первая коробка для меня, остальные работают нормально. Хотя я бы вместо этого использовал изображение, просто чтобы быть уверенным.

— Мбиллард

6

Просто чтобы прояснить, первое изображение должно быть прямоугольником - это пустой флажок!

— Джон Феминелла

1

@Totophil: Ах, хорошо. Я использую Ubuntu, и шрифт Sans по умолчанию, который я настроил в FF, имеет эти символы. В Windows просто используйте карту символов, чтобы найти эти глифы и посмотреть, есть ли у них нужный шрифт. Если нет, вам нужно выбрать другой.

— Джон Феминелла

5

Десятичный код пустого поля: 0x2610 -> 9744. поэтому HTML-код будет выглядеть ☐аналогично для отмеченного флажка: 0x2611 -> 9745 & HTML-код☑

— Vikas

272

Во-первых, вы должны понимать, что вам на самом деле не нужно использовать HTML-объекты - если кодировка вашего HTML-документа объявлена правильно как UTF-8, вы можете просто скопировать / вставить эти символы в свой файл / серверный скрипт / JavaScript / все.

Сказав это, вот полный список всех соответствующих символов UTF-8 / объектов HTML, связанных с этой темой:

☐ (hex: ☐/ dec:): ☐урна для голосования (пустая, так и должно быть)
☑ (hex: ☑/ dec:) ☑: урна с чеком
☒ (hex: ☒/ dec:) ☒: урна с x
✓ (hex: ✓/ dec:): ✓галочка, эквивалентная &checkmark;и &check;в большинстве браузеров
✔ (hex: ✔/ dec:) ✔: тяжелая галочка
✗ (гекс: ✗/ дек .:) ✗: бюллетень х
✘ (hex: ✘/ dec:) ✘: тяжелое голосование x
🗸 (⚠ hex: 🗸/ dec 🗸): светлая галочка (плохо поддерживается на 2017 г.)
✅ (⚠ hex: ✅/ dec :) ✅: белая тяжелая галочка (смешанная поддержка по состоянию на 2017 год)
🗴 (⚠ hex: 🗴/ dec :) 🗴: сценарий голосования X (плохо поддерживается на 2017 г.)
🗶 (⚠ hex: 🗶/ dec :) 🗶: сценарий голосования, выделенный жирным шрифтом X (плохо поддерживается на 2017 г.)
⮽ (⚠ hex: ⮽/ dec :) ⮽: урна с подсветкой X (плохо поддерживается на 2017 г.)
🗵 (⚠ hex: 🗵/ dec :) 🗵: урна со скриптом X (плохо поддерживается на 2017 г.)
🗹 (⚠ hex: 🗹/ dec :) 🗹: урна для голосования с жирным шрифтом (плохо поддерживается на 2017 г.)
🗷 (⚠ hex: 🗷/ dec :) 🗷: урна для голосования с жирным шрифтом X (плохо поддерживается на 2017 г.)

Проверять веб-шрифты на наличие символов галочки? Вот готовый пример использования для более распространенных примеров: A☐B☑C☒D✓E✔F✗G✘H- просто скопируйте / вставьте его в текстовое поле образца поставщика веб-шрифта и посмотрите, какие шрифты поддерживают какие символы галочек.

— Богдан Стэнческу
источник

17

Клиентскому компьютеру необходим правильный шрифт с глифом для отображения этого символа. Но Times New Roman этого не делает. Вместо этого попробуйте Arial Unicode MS или Lucida Grande :

<span style="font-family: Arial Unicode MS, Lucida Grande">
    &#10003; &#10004;
</span>

Это работает для меня на Windows XP в IE 5.5, IE 6.0, FF 3.0.6.

— гумбо
источник

У них нет ни одного шрифта, только Lucida Sans Unicode, который удаленно выглядит как шрифт Unicode, но у него нет галочек.

— Влад Гудим,

Затем перечислите некоторые шрифты , которые имеют глиф для этого персонажа: font-family: Arial Unicode MS, Lucida Sans Unicode, Lucida Grande.

— Гамбо

Гамбо, не работает. Кроме того, у меня не установлены Arial Unicode MS и Lucida Grande.

— Влад Гудим,

Это примерно так близко, как вы собираетесь получить, но, к сожалению, Lucida Sans Unicode не предоставляет U + 2713/2714.

— Бобинц

13

Обычно я использую шрифт fontawesome ( http://fontawesome.io/icon/check/ ), его можно использовать в html-файлах:

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

или в css:

content: "\f00c";
font-family: FontAwesome;

— Штефана
источник

11

Почему бы вам не использовать элемент флажка ввода HTML в режиме только для чтения

<input type="checkbox" disabled="disabled" /> and
<input type="checkbox" checked="checked" disabled="disabled" />

Я предполагаю, что это будет работать во всех браузерах.

— Drejc
источник

6

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

— Влад Гудим

11

Я столкнулся с той же проблемой, и ни одно из предложений не сработало (Firefox на Windows XP).

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

span:before {
    content:url("data:image/gif;base64,R0lGODlhCgAKAJEAAAAAAP///////wAAACH5BAEAAAIALAAAAAAKAAoAAAISlG8AeMq5nnsiSlsjzmpzmj0FADs=");
}

Конечно, вы можете создать свой собственный образ галочки и использовать конвертер для добавления его в качестве данных: image / gif. Надеюсь это поможет.

— Кай Ноак
источник

8

хотя устанавливает кодировку браузера в UTF-8

(Если вы используете числовые ссылки на символы, разумеется, не имеет значения, какая кодировка используется, браузеры получат правильный код Unicode непосредственно из числа.)

<span style="font-family: wingdings; font-size: 200%;">&#252;</span>

Буду признателен, если кто-то может проверить под FF на Windows. Я почти уверен, что он не будет работать на не Windows.

Сбой для меня в Firefox 3, Opera и Safari. Любопытно, что работает в другом браузере Webkit, Chrome. Также не работает в Linux (очевидно, поскольку Wingdings там не установлен; он установлен на Mac, но это не поможет, если в Safari его нет).

Кроме того, это довольно неприятный хак - этот символ, по сути, «ü» и будет отображаться таким образом, как поисковые системы, или если текст будет скопирован и вставлен. Правильные коды Unicode - это путь, если у вас нет альтернативы.

Проблема в том, что ни один шрифт в комплекте с Windows не поставляет U + 2713 CHECK MARK ('✓'). Единственное, что вы, скорее всего, найдете на компьютере с Windows, - это «Arial Unicode MS», на который не следует полагаться. Так что, в конце концов, я думаю, вам придется либо:

используйте другой символ, который лучше поддерживается (например, «●» - bullet , как используется SO), или
используйте изображение с '✓' в качестве альтернативного текста.

— bobince
источник

8

Приехав на вечеринку очень поздно, я обнаружил, что &check;(✓) работал в Opera. Я не тестировал его ни в каких других браузерах, но он может быть полезен для некоторых людей.

— Россум
источник

4

Стоит отметить, что &check;(и &checkmark;) оба оценивают ✓, что и используется главным ответом. Это символьная сущность HTML5, которая не будет работать в IE6.

— Джеймс Доннелли

5

.className {
   content: '\&#x2713';
}

Используя свойство CSS content, вы можете показывать галочку с изображением или другим кодовым знаком.

— S-Sharma
источник

Не уверен: w3schools.com/cssref/pr_gen_content.asp показывает совместное использование с firefox

— s-sharma

todomvc.com/labs/architecture-examples/react проверьте, работает ли он или нет, поскольку они используют контент для отметки.

— S-Шарма

4

Если вы хотите использовать коды utf-8 в контенте css, это возможно:.class{ content: "\2713"; }

— Morteza Ziyae

4

Будет ли достаточно √ (символ квадратного корня, & # 8730;)?

Кроме того, убедитесь, что вы устанавливаете Content-Type:заголовок перед отправкой данных в браузер. Простого указания <meta>тега типа содержимого может быть недостаточно, чтобы побудить браузеры использовать правильный набор символов.

— Ян Кемп
источник

Спасибо! Квадратный корень работает, но выглядит как ошибка ... квадратный корень? Но я думаю, что при отсутствии альтернативы, вероятно, будет настолько близко, насколько это возможно.

— Влад Гудим,

1

Кстати, указание метатега прекрасно устанавливает UTF-8 в моем IE, так что в этом случае это не проблема.

— Влад Гудим

1

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

— Фолькер Э.

1

@VolkerE. Но это было бы весело!

— Дэйв Ньютон,

3

Решение с использованием Wingdings, которое не основано на Unicode и не работает в Linux без Wingdings.

Crossed Checkbox
<div style="font-family: Wingdings;">û</div> ☒

Checked Checkbox
<div style="font-family: Wingdings;">ü</div> ☑

Cross
<div style="font-family: Wingdings;">ý</div> ✗

Check
<div style="font-family: Wingdings;">þ</div> ✓

— Nishant
источник

0

Вы можете использовать ⊕ или ⊗

— Габриэль Соломон
источник

1

Это не знаки тиканья, они обведены плюсом / минусом.

— GKFX

0

Вы можете добавить немного белого с помощью Base64 Encoded GIF ( онлайн-генератор здесь ):

url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==")

Например, в Chrome я использую его для стилизации элемента управления checkbox:

INPUT[type=checkbox]:focus
{
outline:1px solid rgba(0,0,0,0.2);
}

INPUT[type=checkbox]
{
background-color: #DDD;
border-radius: 2px;
-webkit-appearance: button;
width: 17px;
height: 17px;
margin-top: 1px;
cursor:pointer;
}

INPUT[type=checkbox]:checked
{
background:#409fd6 url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==") 3px 3px no-repeat;
}

Если вы просто хотите, чтобы это было в теге IMG, вы бы сделали галочку / галочку как:

<img alt="" src="data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==" width="11" height="10">

— Volomike
источник

0

Использование шрифтов WebDing или WingDing - единственный способ достичь цели, указанной в этом разделе: он должен работать, начиная с IE 6.0.2900 . Поэтому я хотел бы опубликовать некоторые здесь, а также некоторые исправления к опубликованному выше:

Cross
<span style="font-family: Wingdings;">&#251;</span><br>
    
Check
<span style="font-family: Wingdings;">&#252;</span><br>

Crossed Checkbox
<span style="font-family: Wingdings;">&#253;</span><br>
    
Checked Checkbox
<span style="font-family: Wingdings;">&#254;</span><br>
    
Empty Checkbox
<span style="font-family: Wingdings;">&#168;</span><br>
    
Thick Check
<span style="font-family: Webdings;">&#97;</span>

Развернуть фрагмент

Ссылка здесь: WingDings Webdings

— Дмитрий Бабич
источник