“ X”的Unicode字符是否取消/关闭？

219

我只想使用CSS创建一个关闭按钮。

我确定我不是第一个这样做的人，所以有人知道哪个字体的'x'宽度与高度相同，以便可以跨浏览器使用它看起来像关闭按钮吗？

css  fonts  font-face 
— 列昂蒂
source

Answers:

510

✖效果很好。HTML代码是✖。

— 公园
source
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 2014年
1
现在，只要我们可以更改FireFox 32.0中的颜色，即使将颜色设置为CSS，它也始终是红色
— Gerrit Brink
5
另一个（更具吸引力的IMO）选项是＆＃x2715;
— 安德鲁·亨德里
75

为此，×在HTML中使用×标记（乘法符号）怎么办？

除字母X外，“ x”（字母）不应用于表示其他任何内容。

— 哈扎
source
14
按照您的逻辑-x倍也应该只代表x倍。我会说要么使用图片，要么使用关闭字样。
— easwee 2011年
1
是的，我也知道。
— 哈扎
9
“ x”（字母）不应用于表示X字母以外的任何其他内容。- 谁说的？如果那只是你，那背后的逻辑是什么。谢谢
— Valentin Kuzub
1
您也可以使用乘法字符'×'。取自这个问题。
— 卡米尔·萨纳
1
最佳答案恕我直言。我认为所有浏览器都将支持此功能，如果Bootstrap正在使用它……它们通常会遵循最佳做法。
— Rui Marques 2013年
62

× ×或×（相同的事物）U + 00D7乘法符号

×相同字符，字体粗细

⨯U ⨯+ 2A2F Gibbs产品

✖U ✖+ 2716重乘法符号

如果您支持，还有一个表情符号oji。如果不这样做，您只会看到一个正方形=❌

当我与一位设计师合作时，我也在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>
— 大卫·康德雷
source
41

的HTML

✕ &#x2715; ✓ &#x2713;
✖ &#x2716; ✔ &#x2714;

✗ &#x2717;
✘该&#x2718;

× &#x00d7; &times;

的CSS

如果要使用CSS中的上述字符（例如，在:before或:after伪代码中），只需使用转义的\Unicode HEX值，例如：

[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字串
— 罗科·C·布尔扬
source
22

✕是又一个不太厚的好东西。HTML代码是&#10005;或2715以十六进制表示。

— 埃姆莱
source
5

这可能是徒劳的，但是到目前为止，还没有人真正提出过“仅使用CSS创建关闭按钮”的解决方案。只要。干得好：

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

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

— 史蒂夫·贝内特
source
5

这里还没有提到另一个-很好-如果您需要那种外观的项目：╳

&#x2573; or decimal: &#9587;
— 皮卡德
source
4

&times;并font-family: Garamond, "Apple Garamond";使其足够好。Garamond字体细且安全

适当关闭X

— 伊吉
source
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>
— 卢巴
source
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>

使用屏幕阅读器访问该页面的用户可以更方便地访问该页面。

— 理查德JP Le Guen
source
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;
}
— JMASTER B
source
1

通过将文本放置在以可访问的方式隐藏的跨度中，可以使用仅屏幕阅读器可以访问的文本。将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:'\00d7'; color:red; font-size:2em;}
</style>

<button class="close"><span class="hidden">close</span></button>
— 茱迪森林
source
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>
— 用户1432181
source
或者，您可以使用<i class ='material-icons'> close </ i>（带有<head> <link href =“ fonts.googleapis.com/icon?family=Material+Icons ” rel =“ stylesheet”> ）
— user1432181
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.