Unicode character for “X” cancel / close?

Question

I want to create a close button using CSS only.

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

Answer 1

I prefer 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:

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

Fiddle here

Answer 2

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:

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

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

Answer 3

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

Answer 4

This works nicely for me:

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

Answer 5

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

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

Answer 6

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

╳ or decimal: ╳