Какой шрифт для кнопки закрытия CSS "x"?
Я хочу создать кнопку закрытия, используя только CSS.
Я уверен, что я не первый, кто это делает, так что кто-нибудь знает, какой шрифт имеет " x " той же ширины, что и высота, так что его можно использовать в кросс-браузере, чтобы выглядеть как кнопка закрытия?
15 ответов
Как насчет использования × - метки (символа умножения), × в HTML, для этого?
" x " (буква) не следует использовать для представления чего-либо другого, кроме буквы X.
× × или × (то же самое) U+00D7 знак умножения
× тот же символ с сильным весом шрифта
⨯ ⨯ U+2A2F Гиббс продукт
✖ ✖ U + 2716 тяжелый знак умножения
есть также emoji, если вы его поддерживаете. Если вы этого не сделали, вы просто увидели квадрат = ❌
Я тоже этот простой пример кода на Codepen когда я работал с дизайнером, который попросил меня показать ей, как это будет выглядеть, когда я спросил, Могу ли я заменить вашу кнопку закрытия кодированной версией, а не изображением.
<ul>
<li class="ele">
<div class="x large"><b></b><b></b><b></b><b></b></div>
<div class="x spin large"><b></b><b></b><b></b><b></b></div>
<div class="x spin large slow"><b></b><b></b><b></b><b></b></div>
<div class="x flop large"><b></b><b></b><b></b><b></b></div>
<div class="x t large"><b></b><b></b><b></b><b></b></div>
<div class="x shift large"><b></b><b></b><b></b><b></b></div>
</li>
<li class="ele">
<div class="x medium"><b></b><b></b><b></b><b></b></div>
<div class="x spin medium"><b></b><b></b><b></b><b></b></div>
<div class="x spin medium slow"><b></b><b></b><b></b><b></b></div>
<div class="x flop medium"><b></b><b></b><b></b><b></b></div>
<div class="x t medium"><b></b><b></b><b></b><b></b></div>
<div class="x shift medium"><b></b><b></b><b></b><b></b></div>
</li>
<li class="ele">
<div class="x small"><b></b><b></b><b></b><b></b></div>
<div class="x spin small"><b></b><b></b><b></b><b></b></div>
<div class="x spin small slow"><b></b><b></b><b></b><b></b></div>
<div class="x flop small"><b></b><b></b><b></b><b></b></div>
<div class="x t small"><b></b><b></b><b></b><b></b></div>
<div class="x shift small"><b></b><b></b><b></b><b></b></div>
<div class="x small grow"><b></b><b></b><b></b><b></b></div>
</li>
<li class="ele">
<div class="x switch"><b></b><b></b><b></b><b></b></div>
</li>
</ul>
вот также некоторые полезные
HTML-код
✕ ✕ ✓ ✓
✖ ✖ ✔ ✔
✗ ✗
✘ ✘
× × ×
в CSS
если вы хотите использовать вышеуказанные символы из CSS (например, i.e: в :before или :after псевдо) просто используйте шестнадцатеричное значение Unicode, как для пример:
[class^="ico-"], [class*=" ico-"]{
font: normal 1em/1 Arial, sans-serif;
display: inline-block;
}
.ico-times:before{ content: "16"; }
.ico-check:before{ content: "14"; }<i class="ico-times"></i>
<i class="ico-check"></i>Как указал @Haza, можно использовать символ времени. Twitter Bootstrap карты это закрыть значок для отклонения контента, такого как модалы и оповещения.
<button class="close">×</button>
Я предпочитаю шрифт Awesome:http://fortawesome.github.io/Font-Awesome/icons/
значок, который вы будете искать, это fa-times. Это так просто, как это использовать:
<button><i class="fa fa-times"></i> Close</button>
Это, вероятно, педантизм, но до сих пор никто не дал решение "создать кнопку закрытия только с помощью CSS." только. Вот тебе:
#close:before {
content: "✖";
border: 1px solid gray;
background-color:#eee;
padding:0.5em;
cursor: pointer;
}
× и font-family: Garamond, "Apple Garamond"; сделать это достаточно хорошо. Garamond шрифт тонкий и веб-сейф
Это хорошо работает для меня:
<style>
a.closeX {
position: absolute;
right: 0px; top: 0px; width:20px;
background-color: #FFF; color: black;
margin-top:-15px; margin-right:-15px; border-radius: 20px;
padding-left: 3px; padding-top: 1px;
cursor:pointer; z-index: -1;
font-size:16px; font-weight:bold;
}
</style>
<div id="content">
<a class="closeX" id="closeX" onclick='$("#content").hide();'>✖</a>
Click "X" to close this box
</div>
есть еще один, не упомянутый здесь-хороший тонкий - Если вам нужен такой вид поиска для вашего проекта:╳
╳ or decimal: ╳
забудьте о шрифте и используйте фоновое изображение!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<title>Select :after pseudo class/element</title>
<style type="text/css">
.close {
background:url(http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/images/ui-icons_222222_256x240.png) NO-REPEAT -96px -128px;
text-indent:-10000px;
width:20px;
height:20px;
}
</style>
</head>
<body>
<input type="button" class="close" value="Close" />
<button class="close">Close</button>
</body>
</html>
Это будет более доступно для пользователей, посещающих страницу с читателем экрана.
это для людей, которые хотят сделать свой X малый/большой и красный!
HTML-код:
<div class="col-sm-2"> <span><div class="red-x">✖</div></span>
<p>close</p>
</div>
<div class="red-x big-x">✖</div>
CSS:
.red-x {
color: red;
}
.big-x {
font-size: 70px;
text-align: center;
}
вы можете использовать текст, доступный только для читателей экрана, поместив его в промежуток, который вы скрываете доступным способом. Поместите x в CSS, который не может быть прочитан читателями экрана, таким образом, не будет путать, но виден на странице, а также доступен пользователям клавиатуры.
<style>
.hidden {opacity:0; position:absolute; width:0;}
.close {padding:4px 8px; border:1px solid #000; background-color:#fff; cursor:pointer;}
.close:before {content:'d7'; color:red; font-size:2em;}
</style>
<button class="close"><span class="hidden">close</span></button>
используя современные браузеры вы можете вращать + знак:
.popupClose:before {
content:'+';
}
.popupClose {
position:relative;
float:right;
right:10px;
top:0px;
padding:2px;
cursor:pointer;
margin:2px;
color:grey;
font-size:32pt;
transform:rotate(45deg);
}
затем просто поместите следующий html, где вам нужно:
<span class='popupClose'></span>