哪个字体的CSS"x"关闭按钮？
Leo*_*nti 210 css fonts font-face
我想只使用CSS创建一个关闭按钮.
我敢肯定我不是第一个这样做的人,所以有人知道哪个字体的宽度与高度相同,所以它可以跨浏览器使用,看起来像一个关闭按钮？
eip*_*ark 497
✖效果很好.HTML代码是✖.
- 2年后,这个评论只是让我的项目踢了我正在寻找的额外数量的屁股! (7认同)
- 请注意,您必须使用支持此字符的字体.我认为DejaVu看起来很不错.我认为`Lucida Sans Unicode`和`Arial Unicode MS`也支持这种unicode符号.如果你不在某些浏览器(特别是旧的IE)上使用支持这些字符的字体,你会得到的矩形表示不支持的符号.我使用DejaVu的精简版来表示这些符号. (6认同)
- 我认为它被称为"重载乘法X" - http://www.fileformat.info/info/unicode/char/2716/index.htm (6认同)
- 另一个(更有吸引力的IMO)选项是✕ (5认同)
Haz*_*aza 75
那么×在HTML中使用×标记(乘法符号)呢？
"x"(字母)不得用于表示字母X以外的任何其他内容.
- 按照你的逻辑 - 也是x次应该只代表x次.我会说使用图像或关闭这个词. (12认同)
- "x"(字母)不应用于表示X字母的任何其他内容.- 谁说的？如果那只是你背后的逻辑.谢谢 (8认同)
dav*_*rey 60
× ×或×(同样的事)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>
Rok*_*jan 36
HTML
✕ ✕ ✓ ✓
✖ ✖ ✔ ✔
✗ ✗
✘该✘
× × ×
CSS
如果你想使用CSS中的上述字符(例如ie:in a :before或:afterpseudo),只需使用转义的\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>使用不同语言的示例:
✕HTML'\2715'CSS喜欢:.clear:before { content: '\2715'; }'\u2715'JavaScript字符串
Joh*_*ann 19
正如@Haza指出的那样,可以使用时间符号. Twitter Bootstrap将此映射到关闭图标,用于解除内容,如模态和警报.
<button class="close">×</button>
- 通过指出Bootstrap使用它来提供信息,但这是一个重复的答案,它与@Haza的相同. (2认同)
Adá*_*dám 15
\xe2\x80\x95 2021 更新
\n自 Unicode 7.0（2014 年 6 月）起：U+1F5D9“取消 X”
\n- 从语义上讲，这是这里唯一正确的答案。 (5认同)
- @SơnTrần-Nguyễn 好的，但这既是OP所要求的，也与这里的所有其他答案非常相似。 (2认同)
我更喜欢Font Awesome:http://fortawesome.github.io/Font-Awesome/icons/
你要找的图标是fa-times.这很简单,使用方法:
<button><i class="fa fa-times"></i> Close</button>
- @mevius不确定你想说什么？Font Awesome不需要javascript,它们**是**字体.OP询问"哪种字体......". (3认同)
这可能是迂腐,但到目前为止,还没有人真正给出"仅使用CSS创建关闭按钮"的解决方案.只要.干得好:
#close:before {
content: "?";
border: 1px solid gray;
background-color:#eee;
padding:0.5em;
cursor: pointer;
}
http://codepen.io/anon/pen/VaWqYg
还有另外一个没有在这里提到 - 很好 - 如果你需要那种寻找你的项目:╳
╳ or decimal: ╳