Символ Unicode для «X» отменить / закрыть?


219

Я хочу создать кнопку закрытия, используя только CSS.

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

Ответы:


510

Really работает очень хорошо. HTML-код есть ✖.


6
Обратите внимание, что вы должны использовать шрифт, который поддерживает этот символ. Я думаю, что DejaVu выглядит хорошо для этого. Я думаю, Lucida Sans Unicodeи Arial Unicode MSтакже поддерживаю такие символы Unicode. Если вы не используете шрифт, который поддерживает эти символы в некоторых браузерах (особенно в старых IE), все, что вы получите, это прямоугольники, указывающие на неподдерживаемые символы. Я использую урезанную версию DejaVu для таких символов.
Panzi

6
Я считаю, что это называется «тяжелое умножение X» - fileformat.info/info/unicode/char/2716/index.htm
eipark

8
2 года спустя, этот комментарий заставил мой проект надрать то количество задницы, которое я искал!
NominalAeon

1
Теперь, если бы только мы могли изменить цвет в FireFox 32.0, он всегда красный, даже если установить цвет css
Gerrit Brink

5
Другой (более привлекательный вариант) - & # x2715;
Эндрю Хендри

75

А как насчет использования для этого знака ×HTML (символа умножения) в HTML?

«x» (буква) не должна использоваться для обозначения чего-либо другого, кроме буквы X.


14
Следуя вашей логике - также x-времена должны представлять только x раз. Я бы сказал, что использовать изображение или слово закрыть.
easwee

1
Да, это тоже правда, я знаю.
Хаза

9
«x» (буква) не должна использоваться для обозначения чего-либо еще, кроме буквы X. - кто так говорит? если это только ты, что логика за этим. спасибо
Валентин Кузуб

1
Вы также можете использовать символ умножения «×». Взято из этого вопроса .
Камил Сарна

1
Лучший ответ ИМХО. Я думаю, что все браузеры будут поддерживать это, и если Bootstrap использует это ... они обычно следуют передовым методам.
Руи Маркес

62

× ×или ×(то же самое) знак умножения U + 00D7

× тот же персонаж с сильным весом шрифта


⨯U + 2A2F продукт Гиббса


✖U + 2716 знак тяжелого умножения


Также есть смайлики, если вы поддерживаете это. Если нет, вы просто видели квадрат =❌


Я также сделал этот простой пример кода на 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>

41

HTML

&#x2715;&#x2713;
&#x2716;&#x2714;

&#x2717;
&#x2718;

× &#x00d7; &times;

CSS

Если вы хотите использовать вышеуказанные символы из CSS (например, в: :beforeили :afterпсевдо), просто используйте экранированное \значение HEX Unicode, как, например:

[class^="ico-"], [class*=" ico-"]{
  font: normal 1em/1 Arial, sans-serif;
  display: inline-block;
}


.ico-times:before{ content: "\2716"; }
.ico-check:before{ content: "\2714"; }
<i class="ico-times"></i>
<i class="ico-check"></i>

Используйте примеры для разных языков :

  • &#x2715; HTML
  • '\2715' CSS как то есть:.clear:before { content: '\2715'; }
  • '\u2715' Строка JavaScript

22

Another еще один замечательный, не слишком толстый. HTML-код &#10005;, или 2715в шестнадцатеричном виде.


19

Как отметил @Haza, можно использовать символ времени. Twitter Bootstrap отображает это на значок закрытия для отклонения контента, такого как модалы и оповещения.

<button class="close">&times;</button>

2
Информативно, указав, что Bootstrap использует это, но это дублированный ответ, он такой же, как @Haza.
Руи Маркес

7

Я предпочитаю Font Awesome: http://fortawesome.github.io/Font-Awesome/icons/

Значок, который вы ищете, это fa-times. Это так просто, чтобы использовать:

<button><i class="fa fa-times"></i> Close</button>

Скрипка здесь


Это не решение CSS.
rnevius

3
@mevius Не уверен, что ты пытаешься сказать? Font Awesome не требует JavaScript, и они являются шрифтами. ОП спрашивает "какой шрифт ...".
программер

5

Это, вероятно, педантичность, но до сих пор никто не дал решения «создать кнопку закрытия, используя только CSS». только. Ну вот:

#close:before {
  content: "✖";
  border: 1px solid gray;
  background-color:#eee;
  padding:0.5em;
  cursor: pointer;
}

http://codepen.io/anon/pen/VaWqYg


5

есть еще один, не упомянутый здесь - хороший тонкий - если вам нужен такой вид вашего проекта: ╳

&#x2573; or decimal: &#9587;

4

&times;и font-family: Garamond, "Apple Garamond";сделать это достаточно хорошо. Шрифт Garamond тонкий и безопасный для Интернета

правильное закрытие X


3

Это хорошо работает для меня:

<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();'>&#10006;</a>
    Click "X" to close this box
</div>

2

Забудьте о шрифте и используйте фоновое изображение!

<!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>

Это будет более доступно для пользователей, посещающих страницу с помощью программы чтения с экрана.


2

Это для людей которые хотят сделать их Xмаленькими / большими и красными!

HTML:

<div class="col-sm-2"> <span><div class="red-x">&#10006;</div></span>
    <p>close</p>
</div>

<div class="red-x big-x">&#10006;</div>

CSS:

.red-x {
color: red;
}

.big-x {
font-size: 70px;
text-align: center;
}

1

Вы можете использовать текст, который доступен только для программ чтения с экрана, поместив его в область, доступную скрытым способом. Поместите х в 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:'\00d7'; color:red; font-size:2em;}
</style>

<button class="close"><span class="hidden">close</span></button>

1

Используя современные браузеры, вы можете вращать знак +:

.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>

Или вы можете использовать <i class = 'material-icons'> close </ i> (с <head> <link href = " fonts.googleapis.com/icon?family=Material+Icons " rel = "stylesheet"> )
user1432181

1

&times;лучше, чем &#10006;как &#10006;странно ведет себя в Edge и Internet Explorer (протестировано в IE11). Это не получает правильный цвет и заменяется на «эмодзи»

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.