Символ галочки в 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: &#9744;]): пустой (не отмеченный) флажок
  • ☑ ( 0x2611 [HTML десятичный: &#9745;]): проверенная версия предыдущего флажка
  • ✓ ( 0x2713 [десятичный HTML: &#10003;])
  • ✔ ( 0x2714 [десятичный HTML: &#10004;])

Изменить: Кажется, есть некоторая путаница в отношении первого символа здесь, ☐ / 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-код будет выглядеть &#9744;аналогично для отмеченного флажка: 0x2611 -> 9745 & HTML-код&#9745;
Vikas
272

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

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

  • ☐ (hex: &#x2610;/ dec:): &#9744;урна для голосования (пустая, так и должно быть)
  • ☑ (hex: &#x2611;/ dec:) &#9745;: урна с чеком
  • ☒ (hex: &#x2612;/ dec:) &#9746;: урна с x
  • ✓ (hex: &#x2713;/ dec:): &#10003;галочка, эквивалентная &checkmark;и &check;в большинстве браузеров
  • ✔ (hex: &#x2714;/ dec:) &#10004;: тяжелая галочка
  • ✗ (гекс: &#x2717;/ дек .:) &#10007;: бюллетень х
  • ✘ (hex: &#x2718;/ dec:) &#10008;: тяжелое голосование x
  • 🗸 (⚠ hex: &#x1F5F8;/ dec &#128504;): светлая галочка (плохо поддерживается на 2017 г.)
  • ✅ (⚠ hex: &#x2705;/ dec :) &#9989;: белая тяжелая галочка (смешанная поддержка по состоянию на 2017 год)
  • 🗴 (⚠ hex: &#x1F5F4;/ dec :) &#128500;: сценарий голосования X (плохо поддерживается на 2017 г.)
  • 🗶 (⚠ hex: &#x1F5F6;/ dec :) &#128502;: сценарий голосования, выделенный жирным шрифтом X (плохо поддерживается на 2017 г.)
  • ⮽ (⚠ hex: &#x2BBD;/ dec :) &#11197;: урна с подсветкой X (плохо поддерживается на 2017 г.)
  • 🗵 (⚠ hex: &#x1F5F5;/ dec :) &#128501;: урна со скриптом X (плохо поддерживается на 2017 г.)
  • 🗹 (⚠ hex: &#x1F5F9;/ dec :) &#128505;: урна для голосования с жирным шрифтом (плохо поддерживается на 2017 г.)
  • 🗷 (⚠ hex: &#x1F5F7;/ dec :) &#128503;: урна для голосования с жирным шрифтом 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;) оба оценивают &#10003;, что и используется главным ответом. Это символьная сущность 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

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