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

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


当前回答

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

其他回答

我更喜欢字体很棒:http://fortawesome.github.io/Font-Awesome/icons/

你要找的图标是fa-times。使用起来很简单:

<button><i class="fa fa-times"></i> Close</button>

小提琴在这里

HTML

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

✗ &#x2717; ✘ &#x2718;

× × ×

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 &#x2715; <button class="close" type="button">&#x2715; Close</button>
CSS \2715 .close::before { content: '\2715'; }
JavaScript \u2715 document.querySelector(".close").prepend("\u2715")

https://home.unicode.org/

以防万一,有人正在搜索正确和错误的标记:

char rightMark = '\u2713';
char wrongMark = '\u2717';

将打印:

✓ Right Mark
✗ Wrong Mark

控制自己真的很有效。HTML代码是&#10006;

另一种选择是&#x2715:

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