Tick Symbol In HTML/XHTML - Stack Overflow

Trang chủ » Html Box Symbol » Tick Symbol In HTML/XHTML - Stack Overflow

Có thể bạn quan tâm

Sorry, we no longer support your browser Please upgrade to Microsoft Edge, Google Chrome, or Firefox. Learn more about our browser support.
    1. Home
    2. Questions
    3. Tags
    4. Users
    5. Companies
    6. Labs
    7. Jobs
    8. Discussions
    9. Collectives

    10. Communities for your favorite technologies. Explore all Collectives

  2. Teams

    Ask questions, find answers and collaborate at work with Stack Overflow for Teams.

    Try Teams for free Explore Teams
  3. Teams

  4. Ask questions, find answers and collaborate at work with Stack Overflow for Teams. Explore Teams

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

Get early access and see previews of new features.

Learn more about Labs Tick symbol in HTML/XHTML Ask Question Asked 15 years, 9 months ago Modified 1 year, 3 months ago Viewed 599k times 299

We need to display a tick symbol (✓ or ✔) 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).

<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> </head> <body> &#10003; &#10004; </body> </html>

Any help appreciated.

The following works under IE 6.0 and IE 7:

<html> <head> </head> <body> <span style="font-family: wingdings; font-size: 200%;">&#252;</span> </body> </html>

I would appreciate if someone could check under FF on Windows. I am pretty sure it won't work on a non Windows box.

  • html
  • xhtml
Share Improve this question Follow edited May 23, 2013 at 14:56 James Donnelly's user avatar James Donnelly 129k35 gold badges213 silver badges222 bronze badges asked Mar 18, 2009 at 12:25 Vlad Gudim's user avatar Vlad GudimVlad Gudim 23.5k16 gold badges71 silver badges92 bronze badges 8
  • 1 What is a tick symbol supposed to look like? – John Feminella Commented Mar 18, 2009 at 12:28
  • have you seen this: html-faq.com/htmlbasics/?specialcharacters – Sam Hasler Commented Mar 18, 2009 at 12:29
  • 3 Sam, please take a look at the question. – Vlad Gudim Commented Mar 18, 2009 at 12:30
  • @Totophil, I know it talks about the same entities, but it also suggests having the server send an actual HTTP header Content-Type: text/html;charset=utf-8 as well as the problem that the font in use might not contain glyphs for the characters used. – Sam Hasler Commented Mar 18, 2009 at 12:38
  • Here are a couple: amp-what.com/#q=check%20mark &#x2713 &#x2714 – ndp Commented Nov 2, 2012 at 3:05
| Show 3 more comments

14 Answers 14

Sorted by: Reset to default Highest score (default) Trending (recent votes count more) Date modified (newest first) Date created (oldest first) 475

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: &#9744;]): an empty (unchecked) checkbox
  • ☑ (0x2611 [HTML decimal: &#9745;]): the checked version of the previous checkbox
  • ✓ (0x2713 [HTML decimal: &#10003;])
  • ✔ (0x2714 [HTML decimal: &#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.

Share Improve this answer Follow edited Mar 24, 2014 at 20:15 DS.'s user avatar DS. 24k6 gold badges49 silver badges56 bronze badges answered Mar 18, 2009 at 12:30 John Feminella's user avatar John FeminellaJohn Feminella 311k48 gold badges346 silver badges361 bronze badges 13
  • 1 Corporate setup: Win XP Professional + IE 6.0.2900.2180.xpsp_sp2_qfe.070227-2300 – Vlad Gudim Commented Mar 18, 2009 at 12:55
  • The first is a box to me, the rest work fine. Although, I'd use an image instead, just to be sure. – mbillard Commented Mar 18, 2009 at 13:42
  • 8 Just to be clear, the first image is supposed to be a box -- it's an empty checkbox! – John Feminella Commented Mar 18, 2009 at 13:46
  • 1 @Totophil: Ah, okay. I'm using Ubuntu, and the default sans font that I configured in FF has these glyphs. In Windows, just use the character map to look up these glyphs and see if your desired font has them. If not, you'll need to pick a different one. – John Feminella Commented Mar 18, 2009 at 13:53
  • 5 Empty box decimal code: 0x2610 --> 9744. so HTML code will look like &#9744; Similarly for checked box: 0x2611 --> 9745 & HTML code &#9745; – Vikas Commented Aug 23, 2011 at 6:33
| Show 8 more comments 296

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: &#x2610; / dec: &#9744;): ballot box (empty, that's how it's supposed to be)
  • ☑ (hex: &#x2611; / dec: &#9745;): ballot box with check
  • ☒ (hex: &#x2612; / dec: &#9746;): ballot box with x
  • ✓ (hex: &#x2713; / dec: &#10003;): check mark, equivalent to &checkmark; and &check; in most browsers
  • ✔ (hex: &#x2714; / dec: &#10004;): heavy check mark
  • ✗ (hex: &#x2717; / dec: &#10007;): ballot x
  • ✘ (hex: &#x2718; / dec: &#10008;): heavy ballot x
  • 🗸 (⚠ hex: &#x1F5F8; / dec &#128504;): light check mark (poorly supported as of 2017)
  • ✅ (⚠ hex: &#x2705; / dec: &#9989;): white heavy check mark (mixed support as of 2017)
  • 🗴 (⚠ hex: &#x1F5F4; / dec: &#128500;): ballot script X (poorly supported as of 2017)
  • 🗶 (⚠ hex: &#x1F5F6; / dec: &#128502;): ballot bold script X (poorly supported as of 2017)
  • ⮽ (⚠ hex: &#x2BBD; / dec: &#11197;): ballot box with light X (poorly supported as of 2017)
  • 🗵 (⚠ hex: &#x1F5F5; / dec: &#128501;): ballot box with script X (poorly supported as of 2017)
  • 🗹 (⚠ hex: &#x1F5F9; / dec: &#128505;): ballot box with bold check (poorly supported as of 2017)
  • 🗷 (⚠ hex: &#x1F5F7; / dec: &#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.

Share Improve this answer Follow edited Jun 14, 2017 at 12:09 answered Aug 18, 2013 at 0:49 Bogdan Stăncescu's user avatar Bogdan StăncescuBogdan Stăncescu 5,4383 gold badges27 silver badges29 bronze badges Add a comment | 17

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:

<span style="font-family: Arial Unicode MS, Lucida Grande"> &#10003; &#10004; </span>

This works for me on Windows XP in IE 5.5, IE 6.0, FF 3.0.6.

Share Improve this answer Follow edited Mar 18, 2009 at 14:28 answered Mar 18, 2009 at 12:30 Gumbo's user avatar GumboGumbo 655k112 gold badges790 silver badges851 bronze badges 4
  • Haven't got either font, only Lucida Sans Unicode that remotely looks like unicode font but it doesn't have the ticks. – Vlad Gudim Commented Mar 18, 2009 at 12:44
  • Then list some fonts that have a glyph for this character: font-family: Arial Unicode MS, Lucida Sans Unicode, Lucida Grande. – Gumbo Commented Mar 18, 2009 at 13:12
  • Gumbo, doesn't work. Besides I don't have Arial Unicode MS and Lucida Grande installed. – Vlad Gudim Commented Mar 18, 2009 at 13:49
  • It's about as close as you're going to get, but unfortunately Lucida Sans Unicode doesn't supply U+2713/2714. – bobince Commented Mar 18, 2009 at 14:18
Add a comment | 14

I normally use the fontawesome font(http://fontawesome.io/icon/check/), you can use it in html files:

<i class="fa fa-check"></i>

or in css:

content: "\f00c"; font-family: FontAwesome; Share Improve this answer Follow edited Apr 29, 2016 at 14:56 answered Jun 12, 2014 at 10:00 stefan's user avatar stefanstefan 2,7752 gold badges25 silver badges31 bronze badges Add a comment | 13

Why don't you use the HTML input checkbox element in read only mode

<input type="checkbox" disabled="disabled" /> and <input type="checkbox" checked="checked" disabled="disabled" />

I assume this will work on all browsers.

Share Improve this answer Follow answered Mar 18, 2009 at 14:33 Drejc's user avatar DrejcDrejc 14.3k16 gold badges75 silver badges108 bronze badges 1
  • 7 We don't need a control, just an indication that a certain option is available within a matrix. Using a disabled control would be wrong in this case. – Vlad Gudim Commented Mar 18, 2009 at 14:36
Add a comment | 10

Coming very late to the party, I found that &check; (✓) worked in Opera. I haven't tested it on any other browsers, but it might be useful for some people.

Share Improve this answer Follow edited May 23, 2013 at 14:59 James Donnelly's user avatar James Donnelly 129k35 gold badges213 silver badges222 bronze badges answered May 23, 2013 at 14:53 rossum's user avatar rossumrossum 15.7k2 gold badges25 silver badges39 bronze badges 1
  • 5 Worth noting that &check; (and &checkmark;) both evaluate to &#10003;, which is what the top answer uses. It's a HTML5 character entity and wouldn't work in IE6. – James Donnelly Commented May 23, 2013 at 15:03
Add a comment | 9

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.

Share Improve this answer Follow edited May 23, 2017 at 12:10 Community's user avatar CommunityBot 11 silver badge answered Sep 28, 2013 at 19:36 Avatar's user avatar AvatarAvatar 15.1k11 gold badges136 silver badges217 bronze badges Add a comment | 7

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

<span style="font-family: wingdings; font-size: 200%;">&#252;</span>

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.
Share Improve this answer Follow edited Mar 18, 2009 at 14:34 Vlad Gudim's user avatar Vlad Gudim 23.5k16 gold badges71 silver badges92 bronze badges answered Mar 18, 2009 at 14:16 bobince's user avatar bobincebobince 536k110 gold badges671 silver badges843 bronze badges Add a comment | 6

Would √ (square root symbol, &#8730;) suffice?

Alternatively, ensure you're setting the Content-Type: header before sending data to the browser. Merely specifying the <meta> content-type tag may not be enough to encourage browsers to use the correct character set.

Share Improve this answer Follow edited Mar 18, 2009 at 13:38 answered Mar 18, 2009 at 13:31 Ian Kemp's user avatar Ian KempIan Kemp 29.8k21 gold badges120 silver badges153 bronze badges 4
  • Thanks! Square root works, but looks a bit like errr... square root? But I guess in the absense of alternative that would probably be as close as it gets. – Vlad Gudim Commented Mar 18, 2009 at 13:42
  • 1 Btw, specifying the meta tag sets UTF-8 nicely on mine IE, so in this case that's not the issue. – Vlad Gudim Commented Mar 18, 2009 at 13:43
  • 1 A square root is a square root and a checkmark tick is a checkmark tick. Feels to me like putting a toilet pictogram onto a changing room door. – Volker E. Commented Sep 6, 2014 at 23:11
  • 1 @VolkerE. But that'd be hilarious! – Dave Newton Commented Jun 10, 2015 at 21:29
Add a comment | 5 .className { content: '\&#x2713'; }

Using CSS content Property you can show tick with an image or other codesign.

Share Improve this answer Follow edited Dec 5, 2017 at 3:23 answered Sep 25, 2013 at 9:29 s-sharma's user avatar s-sharmas-sharma 2,0051 gold badge16 silver badges20 bronze badges 3
  • Not sure: w3schools.com/cssref/pr_gen_content.asp shows comapatibily with firefox – s-sharma Commented Sep 30, 2013 at 12:12
  • todomvc.com/labs/architecture-examples/react check if its working or not as they are using content for tick mark. – s-sharma Commented Sep 30, 2013 at 12:13
  • 4 If you want to use utf-8 codes in css content, this way it's possible: .class{ content: "\2713"; } – Morteza Ziyaeimehr Commented Sep 8, 2014 at 6:28
Add a comment | 5

Solution using Windows' default font Wingdings; which is not unicode based and doesn't work in Linux (unless it is installed):

Crossed Checkbox <div style="font-family: Wingdings;">û</div> ☒ Checked Checkbox <div style="font-family: Wingdings;">ü</div> ☑ Cross <div style="font-family: Wingdings;">ý</div> ✗ Check <div style="font-family: Wingdings;">þ</div> ✓ Share Improve this answer Follow edited Mar 28, 2021 at 8:07 answered Jan 28, 2015 at 10:46 Nishant's user avatar NishantNishant 21.9k20 gold badges78 silver badges105 bronze badges Add a comment | 2

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:

Cross <span style="font-family: Wingdings;">&#251;</span><br> Check <span style="font-family: Wingdings;">&#252;</span><br> Crossed Checkbox <span style="font-family: Wingdings;">&#253;</span><br> Checked Checkbox <span style="font-family: Wingdings;">&#254;</span><br> Empty Checkbox <span style="font-family: Wingdings;">&#168;</span><br> Thick Check <span style="font-family: Webdings;">&#97;</span><br> Friendly asked in comments (Mary, feel free to change grey border to white. I keep grey here so we can see it) <div style="display: inline; font-family: Wingdings; font-size: 15px; background-color: lightblue; border: 2px solid grey; padding: 1px 4px 0 2px;">&#252;</div>

Reference here: wingdings webdings

Share Improve this answer Follow edited Oct 4, 2023 at 2:32 answered May 14, 2020 at 23:28 dmitrycello's user avatar dmitrycellodmitrycello 1847 bronze badges 2
  • 1 Hello Dmitry! Is it possible to modify the "Checked Checkbox" so that the box is white and the checkmark ist black, i.e. as it is above, although when we have a blue backround? – Mary Star Commented Mar 8, 2021 at 19:38
  • Sure, use div tag instead and add border (see last example). If you want then to make it empty, set color to transparent. – dmitrycello Commented Mar 11, 2021 at 8:57
Add a comment | 0

you could use ⊕ or ⊗

Share Improve this answer Follow answered Mar 18, 2009 at 12:31 Gabriel Solomon's user avatar Gabriel SolomonGabriel Solomon 30k16 gold badges58 silver badges81 bronze badges 1
  • 1 Those aren't tick signs, they're circled plus/minus. – GKFX Commented Jun 4, 2017 at 14:56
Add a comment | 0

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:

<img alt="" src="data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==" width="11" height="10"> Share Improve this answer Follow edited Jun 2, 2019 at 1:53 answered Jun 2, 2019 at 1:48 Volomike's user avatar VolomikeVolomike 24.8k22 gold badges122 silver badges216 bronze badges Add a comment |

Your Answer

Reminder: Answers generated by artificial intelligence tools are not allowed on Stack Overflow. Learn more

Thanks for contributing an answer to Stack Overflow!

  • Please be sure to answer the question. Provide details and share your research!

But avoid …

  • Asking for help, clarification, or responding to other answers.
  • Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Draft saved Draft discarded

Sign up or log in

Sign up using Google Sign up using Email and Password Submit

Post as a guest

Name Email

Required, but never shown

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged
  • html
  • xhtml
or ask your own question.

  • The Overflow Blog
  • Developers want more, more, more: the 2024 results from Stack Overflow’s...
  • How AI apps are like Google Search
  • Featured on Meta
  • The December 2024 Community Asks Sprint has been moved to March 2025 (and...
  • Stack Overflow Jobs is expanding to more countries

Linked

96 HTML entity for check mark 951 How to draw checkbox or tick mark in GitHub Markdown table? 35 proper CSS for generating a checkmark li that works cross-browser 20 Degrading Unicode characters for web browsers with missing fonts 6 Using jQuery to add a ✔ tick mark in span 4 Render Datatables Boolean Column 2 Can I put a 'tick' symbol on an HTML button using the 'value' attribute? 3 Displaying check mark and cross instead of boolean TRUE and False? 3 ✔ and ✘ compatible alternative when lacking font 2 &checkmark; &excl; &cross; is not working IE See more linked questions 244 In HTML I can make a checkmark with &#x2713; . Is there a corresponding X-mark? 30 Show tick symbol on label 2 Can I put a 'tick' symbol on an HTML button using the 'value' attribute? 5 How to create a new web character symbol recognizable by html/javascript? 4 How to produce X mark in html. 1 Adding special symbols into HTML 0 Why does "\e034" appear in css but does not create a tick icon? 2 How do you color HTML symbols like x's and checkmarks? 0 Put tick mark on the button corner 0 How to make this symbol in html?

Hot Network Questions

  • Can game companies detect pirated games and sue if the user obtained the games using legitimate ways in other platforms?
  • Handling One-Inflated Count Data Instead of Zero-inflated
  • Difference on and down
  • What is a good way to DM searching for something?
  • Are NASA computers really that powerful?
  • Maximal subgroup contains either the center or the commutator subgroup
  • Most distant visible object in the daytime sky - Venus?
  • Publication in a journal that has now disapeared entirely. Can I publish the paper elsewhere?
  • What happened to 1T-SRAM?
  • Is copper anti-seize good for aluminium?
  • Frequency identification via Fourier when wave period is larger than dataset length
  • What are these seemingly empty RAM sticks?
  • How can I tackle this probability question on deck of cards with replacement?
  • How do I create a government in my novel?
  • Test To Destruction - short story (not the Keith Laumer one)
  • What do physicists mean by *coordinate transformation* exactly?
  • What religious significance does the fine tuning argument have?
  • Review request: evolution of dragon "fire"
  • How does one call two triangles that are image by a rotation one each other?
  • What is the origin of "litera" versus "littera"?
  • C memory leak warning
  • Orly airport Metro ticket information
  • Bringing in a peanut butter sandwich to discourage lunch thief who has peanut allergy
  • Happy 2025! This math equation is finally true. When is the next time it will be true?
more hot questions Question feed Subscribe to RSS Question feed

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

lang-html

Từ khóa » Html Box Symbol