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 can be used cross-browser to look like a close button

User · Answer

amp times  is better than  amp  10006  as  amp  10006  behaves strangely in Edge and Internet explorer  tested in IE11   It doesn t get the right color and is replaced by an  emoji

User · Answer

Using modern browsers you can rotate a   sign    popupClose before       content         popupClose       position relative      float right      right 10px      top 0px      padding 2px      cursor pointer      margin 2px      color grey      font-size 32pt      transform rotate 45deg       then simply place the following html where you need     lt span class  popupClose  gt  lt  span gt

User · Answer

amp  215  or  amp times   same thing   U 00D7 multiplication sign     same character with a strong font weight       amp  10799  U 2A2F Gibbs product       amp  10006  U 2716 heavy multiplication sign    There s also an emoji   10060  if you support it   If you don t you just saw a square    amp  10060     I also made this simple code example on Codepen when 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    lt ul gt     lt li class  ele  gt       lt div class  x large  gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt  div gt       lt div class  x spin large  gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt  div gt       lt div class  x spin large slow  gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt  div gt       lt div class  x flop large  gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt  div gt       lt div class  x t large  gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt  div gt       lt div class  x shift large  gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt  div gt     lt  li gt     lt li class  ele  gt       lt div class  x medium  gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt  div gt       lt div class  x spin medium  gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt  div gt       lt div class  x spin medium slow  gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt  div gt       lt div class  x flop medium  gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt  div gt       lt div class  x t medium  gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt  div gt       lt div class  x shift medium  gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt  div gt      lt  li gt     lt li class  ele  gt       lt div class  x small  gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt  div gt       lt div class  x spin small  gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt  div gt       lt div class  x spin small slow  gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt  div gt       lt div class  x flop small  gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt  div gt       lt div class  x t small  gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt  div gt       lt div class  x shift small  gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt  div gt       lt div class  x small grow  gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt  div gt      lt  li gt     lt li class  ele  gt       lt div class  x switch  gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt b gt  lt  b gt  lt  div gt     lt  li gt   lt  ul gt

User · Answer

Forget about a font and use a background image    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  xml lang  en  lang  en   gt       lt head gt           lt title gt Select  after pseudo class element lt  title gt           lt style type  text css  gt               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                         lt  style gt       lt  head gt       lt body gt           lt input type  button  class  close  value  Close    gt           lt button class  close  gt Close lt  button gt       lt  body gt   lt  html gt    This will be more accessible for users visiting the page with a screen reader

User · Answer

This is for people who want to make their X small big and red   HTML    lt div class  col-sm-2  gt   lt span gt  lt div class  red-x  gt  amp  10006  lt  div gt  lt  span gt       lt p gt close lt  p gt   lt  div gt    lt div class  red-x big-x  gt  amp  10006  lt  div gt    CSS    red-x   color  red      big-x   font-size  70px  text-align  center

User · Answer

You can use text that is only accessible to screen readers by placing it in a span which you hide in an accessible way  Place the x in the CSS which can t be read by screen readers  thus won t confuse  but is visible on the page  and also accessible by keyboard users    lt style gt   hidden  opacity 0  position absolute  width 0    close  padding 4px 8px  border 1px solid  000  background-color  fff  cursor pointer    close before  content   00d7   color red  font-size 2em    lt  style gt    lt button class  close  gt  lt span class  hidden  gt close lt  span gt  lt  button gt

User · Answer

What about using the   -mark  the multiplication symbol    amp times  in HTML  for that    x   letter  should not be used to represent anything else other than the letter X

User · Answer

HTML     amp  x2715        amp  x2713      amp  x2716       amp  x2714     amp  x2717     amp  x2718       amp  x00d7    amp times  CSS If you want to use the above characters from CSS  like i e  in an  before or  after pseudo  simply use the escaped   Unicode HEX value  like for example   x000D   x000D   class   ico-     class    ico-      font  normal 1em 1 Arial  sans-serif    display  inline-block       ico-times before  content    2716      ico-check before  content    2714     x000D   lt i class  ico-times  role  img  aria-label  Cancel  gt  lt  i gt   lt i class  ico-check  role  img  aria-label  Accept  gt  lt  i gt  x000D   x000D   x000D   Use examples for different languages    amp  x2715  HTML   2715  CSS like i e   clear before   content    2715       u2715  JavaScript string  https   home unicode org

User · Answer

This works nicely for me     lt style gt  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     lt  style gt   lt div id  content  gt       lt a class  closeX  id  closeX  onclick      content   hide     gt  amp  10006  lt  a gt      Click  X  to close this box  lt  div gt

User · Answer

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    lt button gt  lt i class  fa fa-times  gt  lt  i gt  Close lt  button gt    Fiddle here

User · Answer

As  Haza pointed out the times symbol can be used   Twitter Bootstrap maps this to a close icon for dismissing content like modals and alerts    lt button class  close  gt  amp times  lt  button gt

User · Answer

there s another one not mentioned here - nice thin - if you need that kind of look for your project    x2573    amp  x2573  or decimal   amp  9587

User · Answer

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

User · Answer

works really well  The HTML code is  amp  10006   An alternative is  amp  x2715

User · Answer

amp  x274C   looks like    its good for me

User · Answer

amp times  and font-family  Garamond   Apple Garamond   make it good enough  Garamond font is thin and web safe

User · Answer

10005  is another great one that s not too thick  The HTML code is  amp  10005   or 2715 in hex

[css] Unicode character for "X" cancel / close?

Examples related to css

Examples related to fonts

Examples related to font-face