CSS“x”closuresbutton的哪种字体？
我只想使用CSS创build一个closuresbutton。
我确定我不是第一个这样做的人，所以有人知道哪个字体的宽度和高度相同，所以可以用跨浏览器来看起来像是closuresbutton吗？
✖工作得很好。 HTML代码是✖ 。
怎么样使用×标记（乘号）， × 在HTML中，为什么呢？
不应使用“x”（字母）表示除字母X外的其他任何内容。
× × 或× （同样的事情）U + 00D7乘号
×相同的字体与强大的字体重量
< ⨯ s> ⨯ U + 2A2F吉布斯产品
</s> ✖ U + 2716重倍增标志
如果你支持的话，还有一个表情符号。 如果你不是刚刚看到一个正方形= ❌
我还在Codepen上做了这个简单的代码示例，当时我正在和一个devise师一起工作，当我问我是否可以使用编码版本而不是图像来replaceclosuresbutton时，会看到她的样子。
<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="xt 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="xt 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="xt 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代码是✕ ，或hex为2715 。
正如@Haza指出，时代符号可以被使用。 Twitter Bootstrap将其映射到一个closures图标，用于解除模态和警报等内容。
<button class="close">×</button>
这里也有一些有用的
HTML
✕ ✕ ✓ ✓
< ✖ ✔ ✔
< ✗
< ✘
× × ×
CSS
如果你想使用CSS中的上述字符（比如ie：in :before或:after pseudo），只需使用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>
我更喜欢Font Awesome： http : //fortawesome.github.io/Font-Awesome/icons/
你要找的图标是fa-times 。 这很简单，使用：
<button><i class="fa fa-times"></i> Close</button>
在这里拨弄
这可能是单调的，但到目前为止还没有人真正给出一个解决scheme，“只使用CSS创build一个closuresbutton”。 只要。 干得好：
#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/basehttp://img.dovov.comui-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:'\00d7'; 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>
