Символ галочки в HTML / XHTML - PullRequest
Новая
       52

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

268 голосов
/ 18 марта 2009

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

Должен работать, начиная с 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-принтере.

Ответы [ 13 ]

3 голосов
/ 28 января 2015

Решение с использованием 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> ✓
0 голосов
/ 02 июня 2019

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

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

Например, в Chrome я использую его для стилизации флажка: 

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">
0 голосов
/ 18 марта 2009

вы можете использовать & oplus; или & otimes;

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...