我想只使用CSS创建一个关闭按钮。
我相信我不是第一个这样做的人，所以有人知道哪种字体的“x”宽与高相同，这样它就可以跨浏览器使用，看起来像一个关闭按钮吗?
当前回答
是另一个不太厚的好选项。HTML代码是✕，或者十六进制的2715。
其他回答
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/
这是为那些想让他们的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;
}
我更喜欢字体很棒:http://fortawesome.github.io/Font-Awesome/icons/
你要找的图标是fa-times。使用起来很简单:
<button><i class="fa fa-times"></i> Close</button>
小提琴在这里
是另一个不太厚的好选项。HTML代码是✕，或者十六进制的2715。
正如@Haza指出的，可以使用时间符号。Twitter Bootstrap将此映射为一个关闭图标，用于解散情态动词和提醒等内容。
<button class="close">×</button>
