CSS “X”的Unicode字符取消/关闭？

Unicode character for "X" cancel / close?

提问by Leonti

I want to create a close button using CSS only.

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

I'm sure I'm not the first to do this, so does anyone know which font has an 'x' the same width as height, so that it can be used cross-browser to look like a close button?

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

回答by eipark

✖ works really well. The HTML code is ✖.

✖ 效果非常好。HTML 代码是✖.

回答by Haza

What about using the ×-mark (the multiplication symbol), ×in HTML, for that?

为此，×在 HTML 中使用 × 标记（乘法符号）怎么样？

"x" (letter) should not be used to represent anything else other than the letter X.

“x”（字母）不应用于表示除字母 X 之外的任何其他内容。

回答by davidcondrey

× ×or ×(same thing) U+00D7 multiplication sign

××或×（相同的东西）U+00D7 乘号

×same character with a strong font weight

×相同字符，字体粗细

---

---

? ⨯U+2A2F Gibbs product

? ⨯U+2A2F 吉布斯积

---

---

? ✖U+2716 heavy multiplication sign

? ✖U+2716 重乘号

---

---

There's also an emoji ❌ if you support it. If you don't you just saw a square = ❌

如果您支持，还有一个表情符号❌。如果你不这样做，你只是看到一个正方形 =❌

---

---

I also made this simple code example on Codepenwhen I was working with a designer who asked me to show her what it would look like when I asked if I could replace your close button with a coded version rather than an image.

当我与一位设计师合作时，我还在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>

回答by Roko C. Buljan

HTML

HTML

✕ ✕✓ ✓
✖ ✖✔ ✔

✕ ✕✓ ✓
✖ ✖✔ ✔

✗ ✗
✘ ✘

✗ ✗
✘✘

× ××

× ××

CSS

CSS

If you want to use the above characters from CSS (like i.e: in an :beforeor :afterpseudo) simply use the escaped \Unicode HEX value, like for example:

如果您想使用上述 CSS 中的字符（如 ie: in an :beforeor :afterpseudo），只需使用转义的\Unicode HEX 值，例如：

[class^="ico-"], [class*=" ico-"]{
  font: normal 1em/1 Arial, sans-serif;
  display: inline-block;
}


.ico-times:before{ content: "16"; }
.ico-check:before{ content: "14"; }

<i class="ico-times"></i>
<i class="ico-check"></i>

Use examples for different languages:

使用不同语言的示例：

• ✕HTML
• '\2715'CSSlike i.e: .clear:before { content: '\2715'; }
• '\u2715'JavaScriptstring

• ✕HTML
• '\2715'CSS像 ie：.clear:before { content: '\2715'; }
• '\u2715'JavaScript字符串

回答by emlai

✕ is another great one that's not too thick. The HTML code is ✕, or 2715in hex.

✕ 是另一种不太厚的很棒的。HTML 代码是✕, 或2715十六进制。

回答by John Lehmann

As @Haza pointed out the times symbol can be used. Twitter Bootstrapmaps this to a close iconfor dismissing content like modals and alerts.

正如@Haza 指出的那样，可以使用时间符号。 Twitter Bootstrap将此映射到关闭图标，用于关闭模式和警报等内容。

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

回答by prograhammer

I prefer Font Awesome: http://fortawesome.github.io/Font-Awesome/icons/

我更喜欢 Font Awesome：http: //fortawesome.github.io/Font-Awesome/icons/

The icon you would be looking for is fa-times. It's as simple as this to use:

您要查找的图标是fa-times。使用起来就这么简单：

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

Fiddle here

在这里摆弄

回答by Steve Bennett

This is probably pedantry, but so far no one has really given a solution "to create a close button using CSS only." only. Here you go:

这可能是迂腐，但到目前为止，还没有人真正给出“仅使用 CSS 创建关闭按钮”的解决方案。只要。干得好：

#close:before {
  content: "?";
  border: 1px solid gray;
  background-color:#eee;
  padding:0.5em;
  cursor: pointer;
}

http://codepen.io/anon/pen/VaWqYg

http://codepen.io/anon/pen/VaWqYg

回答by Picard

there's another one not mentioned here - nice thin - if you need that kind of look for your project: ╳

还有一个这里没有提到 - 很薄 - 如果你的项目需要那种外观：╳

╳ or decimal: ╳

回答by Iggy

×and font-family: Garamond, "Apple Garamond";make it good enough. Garamond font is thin and web safe

×并font-family: Garamond, "Apple Garamond";让它足够好。Garamond 字体很薄而且网络安全