Tick symbol in HTML XHTML

Question

We need to display a tick symbol    10003  or   10004   within an internal web app and would ideally like to avoid using an image   Has to work starting with IE 6 0 2900 on a XP box  ideally we need it be cross-browser  IE   recent versions of FF    The following displays boxes although sets browser encoding to UTF-8  META works nicely and not the issue   The default font is Times New Roman  might be an issue  but trying Lucida Sans Unicode doesn t help and I don t have neither Arial Unicode MS  nor Lucida Grande installed     lt html gt   lt head gt   lt meta http-equiv  Content-Type  content  text html charset utf-8    gt   lt  head gt   lt body gt    amp  10003   amp  10004   lt  body gt   lt  html gt    Any help appreciated     The following works under IE 6 0 and IE 7    lt html gt   lt head gt    lt  head gt   lt body gt    lt span style  font-family  wingdings  font-size  200    gt  amp  252  lt  span gt   lt  body gt   lt  html gt    I would appreciate if someone could check under FF on Windows  I am pretty sure it won t work on a non Windows box

User · Answer

First off  you should realize that you don t actually need to use HTML entities     as long as your HTML document s encoding is declared properly as UTF-8  you can simply copy paste these symbols into your file server-side script JavaScript whatever   Having said that  here s the exhaustive list of all relevant UTF-8 characters   HTML entities related to this topic       hex   amp  x2610    dec   amp  9744    ballot box  empty  that s how it s supposed to be     hex   amp  x2611    dec   amp  9745    ballot box with check    hex   amp  x2612    dec   amp  9746    ballot box with x    hex   amp  x2713    dec   amp  10003    check mark  equivalent to  amp checkmark  and  amp check  in most browsers    hex   amp  x2714    dec   amp  10004    heavy check mark    hex   amp  x2717    dec   amp  10007    ballot x    hex   amp  x2718    dec   amp  10008    heavy ballot x     hex   amp  x1F5F8    dec  amp  128504    light check mark  poorly supported as of 2017       hex   amp  x2705    dec   amp  9989    white heavy check mark  mixed support as of 2017      hex   amp  x1F5F4    dec   amp  128500    ballot script X  poorly supported as of 2017       hex   amp  x1F5F6    dec   amp  128502    ballot bold script X  poorly supported as of 2017       hex   amp  x2BBD    dec   amp  11197    ballot box with light X  poorly supported as of 2017      hex   amp  x1F5F5    dec   amp  128501    ballot box with script X  poorly supported as of 2017      hex   amp  x1F5F9    dec   amp  128505    ballot box with bold check  poorly supported as of 2017      hex   amp  x1F5F7    dec   amp  128503    ballot box with bold script X  poorly supported as of 2017    Checking out web fonts for tick symbols  Here s a ready to use sample for the more common ones  A B C D E F G H -- just copy paste this into your webfont provider s sample text box and see which fonts support what tick symbols

User · Answer

Using WebDing or WingDing fonts is the only way to achieve the goal of this topic  it has to work starting with IE 6 0 2900  Therefore I would post some here  as well as some correction to posted above    x000D   x000D  Cross x000D   lt span style  font-family  Wingdings   gt  amp  251  lt  span gt  lt br gt  x000D       x000D  Check x000D   lt span style  font-family  Wingdings   gt  amp  252  lt  span gt  lt br gt  x000D   x000D  Crossed Checkbox x000D   lt span style  font-family  Wingdings   gt  amp  253  lt  span gt  lt br gt  x000D       x000D  Checked Checkbox x000D   lt span style  font-family  Wingdings   gt  amp  254  lt  span gt  lt br gt  x000D       x000D  Empty Checkbox x000D   lt span style  font-family  Wingdings   gt  amp  168  lt  span gt  lt br gt  x000D       x000D  Thick Check x000D   lt span style  font-family  Webdings   gt  amp  97  lt  span gt  x000D   x000D   x000D    Reference here  wingdings webdings

User · Answer

I run into the same problem and none of the suggestions worked  Firefox on Windows XP     So I found a possible workaround using image data to display a little checkmark   span before       content url  data image gif base64 R0lGODlhCgAKAJEAAAAAAP       wAAACH5BAEAAAIALAAAAAAKAAoAAAISlG8AeMq5nnsiSlsjzmpzmj0FADs         Of course you can create your own checkmark image and use a converter to add it as data image gif  Hope this helps

User · Answer

Coming very late to the party  I found that  amp check    check   worked in Opera   I haven t tested it on any other browsers  but it might be useful for some people

User · Answer

The client machine needs a proper font that has a glyph for this character to display it  But Times New Roman doesn   t  Try Arial Unicode MS or Lucida Grande instead    lt span style  font-family  Arial Unicode MS  Lucida Grande  gt       amp  10003   amp  10004   lt  span gt    This works for me on Windows XP in IE 5 5  IE 6 0  FF 3 0 6

User · Answer

Would   8730   square root symbol   amp  8730   suffice   Alternatively  ensure you re setting the Content-Type  header before sending data to the browser  Merely specifying the  lt meta gt  content-type tag may not be enough to encourage browsers to use the correct character set

User · Answer

Why don t you use the HTML input checkbox element in read only mode   lt input type  checkbox  disabled  disabled    gt  and  lt input type  checkbox  checked  checked  disabled  disabled    gt    I assume this will work on all browsers

User · Answer

Solution using Wingdings  which is not unicode based and doesn t work in Linux without Wingdings installed   Crossed Checkbox  lt div style  font-family  Wingdings   gt    lt  div gt     Checked Checkbox  lt div style  font-family  Wingdings   gt    lt  div gt     Cross  lt div style  font-family  Wingdings   gt    lt  div gt     Check  lt div style  font-family  Wingdings   gt    lt  div gt

User · Answer

although sets browser encoding to UTF-8    If you re using numeric character references of course it doesn t matter what encoding is being used  browsers will get the correct Unicode codepoint directly from the number     lt span style  font-family  wingdings  font-size  200    gt  amp  252  lt  span gt       I would appreciate if someone could check under FF on Windows  I am pretty sure it won t work on a non Windows box    Fails for me in Firefox 3  Opera  and Safari  Curiously  works in the other Webkit browser  Chrome  Also fails on Linux  obviously  as Wingdings isn t installed there  it is installed on Macs  but that doesn t help you if Safari s not having it    Also it s a pretty nasty hack     that character is to all intents and purposes          and will appear that way to things like search engines  or if the text is copy-and-pasted  Proper Unicode code points are the way to go unless you really have no alternative   The problem is that no font bundled with Windows supplies U 2713 CHECK MARK            The only one that you re at all likely to find on a Windows machine is    Arial Unicode MS     which is not really to be relied upon  So in the end I think you ll have to either    use a different character which is better supported  eg              bullet  as used by SO   or use an image  with         as the alt text

User · Answer

className      content     amp  x2713       Using CSS content Property you can show tick with an image or other codesign

User · Answer

I normally use the fontawesome font http   fontawesome io icon check    you can use it in html files          lt i class  fa fa-check  gt  lt  i gt    or in css   content    f00c   font-family  FontAwesome

User · Answer

you could use    oplus  or  otimes

User · Answer

You can add a little white one with a Base64 Encoded GIF  online generator here    url  data image gif base64 R0lGODlhCwAKAIABAP    3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH AC73WHIsw0UCjglraO20PNhYAOw       With Chrome  for instance  I use it to style the checkbox control   INPUT type checkbox  focus   outline 1px solid rgba 0 0 0 0 2      INPUT type checkbox    background-color   DDD  border-radius  2px  -webkit-appearance  button  width  17px  height  17px  margin-top  1px  cursor pointer     INPUT type checkbox  checked   background  409fd6 url  data image gif base64 R0lGODlhCwAKAIABAP    3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH AC73WHIsw0UCjglraO20PNhYAOw     3px 3px no-repeat      If you just wanted it in an IMG tag  you would do the checkmark tickmark as    lt img alt    src  data image gif base64 R0lGODlhCwAKAIABAP    3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH AC73WHIsw0UCjglraO20PNhYAOw    width  11  height  10  gt

User · Answer

I think you re using less-well-supported Unicode values  which don t always have glyphs for all the code points  Try the following characters       0x2610 in Unicode hexadecimal  HTML decimal   amp  9744     an empty  unchecked  checkbox    0x2611  HTML decimal   amp  9745     the checked version of the previous checkbox    0x2713  HTML decimal   amp  10003       0x2714  HTML decimal   amp  10004      Edit  There seems to be some confusion about the first symbol here      0x2610  This is an empty  unchecked  checkbox  so if you see a box  that s the way it s supposed to look  It s the counterpart to     0x2611  which is the checked version

[html] Tick symbol in HTML/XHTML

Examples related to html

Examples related to xhtml