Unicode字符“X”取消/关闭?

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

我相信我不是第一个这样做的人，所以有人知道哪种字体的“x”宽与高相同，这样它就可以跨浏览器使用，看起来像一个关闭按钮吗?

当前回答

如果使用×-mark(乘法符号)，×在HTML中，为了那个?

“x”(字母)不能用来表示字母x以外的任何东西。

2011-03-18 14:38:17

其他回答

这对我来说很管用:

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

2012-07-22 19:48:23

控制自己真的很有效。HTML代码是✖

另一种选择是&#x2715:

2012-02-08 20:43:26

正如@Haza指出的，可以使用时间符号。Twitter Bootstrap将此映射为一个关闭图标，用于解散情态动词和提醒等内容。

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

2013-03-28 20:31:55

HTML

✕ ✕ ✓ ✓ ✖ ✖ ✔ ✔

✗ ✗ ✘ ✘

× × ×

CSS

在::before或::after伪元素中使用转义的\ Unicode HEX值，如下所示:

[class^="ico-"]， [class*=" ico-"] { 字体:normal 1em/1 Arial, sans-serif; 显示:inline-block; ｝ .ico-times::before{内容:"\2716";｝ .ico-check::before{内容:"\2714";｝ <i class="ico-times" role="img" aria-label="Cancel"></i> . <i class="ico-check" role="img" aria-label="Accept"></i> .

用例:

Language	Syntax	Example
HTML	✕	`<button class="close" type="button">✕ Close</button>`
CSS	\2715	`.close::before { content: '\2715'; }`
JavaScript	\u2715	`document.querySelector(".close").prepend("\u2715")`

https://home.unicode.org/

2017-06-23 23:55:00

报;比✖& # 10006;在Edge和Internet explorer(在IE11中测试)中表现异常。它没有得到正确的颜色，并被一个“表情符号”所取代

2019-04-30 10:39:52

Unicode字符“X”取消/关闭?

推荐文章

最新文章

标签