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

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

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

当前回答

是另一个不太厚的好选项。HTML代码是✕，或者十六进制的2715。

2016-01-12 21:33:16

其他回答

这是为那些想让他们的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;
}

2015-11-17 19:42:55

忘记字体，使用背景图像!

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

对于使用屏幕阅读器访问页面的用户来说，这将更容易访问。

2011-03-18 14:43:34

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

另一种选择是&#x2715:

2012-02-08 20:43:26

报;and font-family: Garamond，“苹果Garamond”;让它足够好。Garamond字体很薄，网络安全

2015-01-28 01:00:49

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

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

推荐文章

最新文章

标签