I am looking for character which could replace image icon, for example like ✘ (xmark) and ✔ (tick), maybe some symbol to "draft" or "new message"?
EDIT:
Fav: ❤
Draft: ✍
Message: ✉
To find useful symbols, I have two great resources:
http://shapecatcher.com
Allows you to draw a shape, which it then searches for similarly shaped unicode symbols.
https://www.fileformat.info/info/unicode/block/index.htm
Lists unicode by the character blocks (using an embedded unicode font to maximize compatibility for display) and has a "display a certain block with images" functionality that allows you to review symbol blocks.
Both are quite useful though I often end up using shapecatcher these days just because it's a fun break just to be able to draw the shape that you want and have the site pull it up for you. At least, sometimes it will put it up.
Misc. Symbols Blocks
http://shapecatcher.com/unicode/block/Miscellaneous_Symbols_And_Pictographs is also a great category of unicode symbols, though as with all unicode, you may have to test compatibility.
https://www.fileformat.info/info/unicode/block/miscellaneous_symbols/images.htm is the block of the miscellaneous symbols, for comparison.
⌚ U+0231A WATCH
⌛ U+0231B HOURGLASS
♟ U+265F SOLID CHESS PAWN
⚷ U+26B7 CHIRON
★ U+2605 SOLID STAR
✓ U+2713 CHECK MARK
☑ U+2611 SQUARE CHECKBOX
✕ U+2715 MULTIPLICATION X
☒ U+2612 SQUARE X-ED BOX
⚠ U+26A0 WARNING SIGN
Are also good symbols to add to the list.
Edit: In 2019 I would now recommend using a robust icon pack, either in svg form or font-file form, the presentation of unicode is often less controllable for web developers.
stackoverflow.com used to use "●" (U+25CF BLACK CIRCLE) for badges.
There are tons of useful characters in Unicode:
✆ U+2706 TELEPHONE LOCATION SIGN
✉ U+2709 ENVELOPE
☎ U+260E BLACK TELEPHONE and ☏ U+260F WHITE TELEPHONE
✎ U+270E LOWER RIGHT PENCIL
⌛ U+231B HOURGLASS
⌨ U+2328 KEYBOARD
←
↑
→
↓
↔
↕
↖
↗
↘
↙
just to name a few...
Why not just peruse the whole list?
I've used the block-arrows:
U+25b2 ▲, U+25ba ►, U+25bc ▼, U+25c4 ◄
Look at http://unicode.org/charts#symbols for some ideas. I'm not sure what would work for "draft" or "new message" but there is a lot to choose from there.
Some symbols might not be supported by the font selected into the browser page. Even if they are, a lot of them look really bad at small sizes. You're better off using an image if you can.
http://unicode-table.com/ is great too but for some unicodes designed for web design icons, i recommend : http://kudakurage.com/ligature_symbols/.
Twitter Bootstrap uses × (×) for close buttons.
I would suggest using custom font like https://github.com/FortAwesome/Font-Awesome
You can also have svg/png version https://github.com/encharm/Font-Awesome-SVG-PNG
There are also other svg icons
https://github.com/iconic/open-iconic
https://github.com/outpunk/evil-icons
Pure css icons https://github.com/saeedalipoor/icono
For Material Design you have static svg icons https://google.github.io/material-design-icons/ and animated:
http://tympanus.net/Development/AnimatedSVGIcons/
http://tympanus.net/Development/IconHoverEffects/
http://tympanus.net/Development/AnimatedCheckboxes/
https://alexk111.github.io/SVG-Morpheus/
I am surprised no one has posted Unicode emojis yet:
Range U+1F600 - U+1F64F
Just some from the list:
😁 :U+1F601: GRINNING FACE WITH SMILING EYES 😁
😂 :U+1F602: FACE WITH TEARS OF JOY 😂
😃 :U+1F603: SMILING FACE WITH OPEN MOUTH 😃
😄 :U+1F604: SMILING FACE WITH OPEN MOUTH AND SMILING EYES 😄
😅 :U+1F605: SMILING FACE WITH OPEN MOUTH AND COLD SWEAT 😅
😆 :U+1F606: SMILING FACE WITH OPEN MOUTH AND TIGHTLY-CLOSED EYES 😆
😷 :U+1F637: FACE WITH MEDICAL MASK 😷
Also have a look at this list of cool icons from Supplemental list
☣ : U+2623: BIOHAZARD SIGN ☣
☢ : U+2622: RADIOACTIVE SIGN ☢
I've used the magnifying glass icon as the body of an anchor to link to a cool interactive page for some data analysis that allowed a user to pair arbitrary data selections much like this example.
🔎
Being a link the default underline appearance somewhat obscured the unicode glyph but that effect was negligible for our internal tool but might be suboptimal for something public facing.
Related
Just to make things clear, I have used an RTE in the backend to store some description. Later, through an api, I am receiving the description along with other details as a response. Now the styles are intact till now. For example, bold headings. But when I render it in the HTML document using innerHTML property, all I see is unformatted text. The headings are not bold anymore.
Here's a part of response:
</p>\r\n\n\r\n<p><span style=\"font-weight: bold;\">Features</span> \n </p>\r\n\n\r\n<p>Gives even skin tone, smoother complexion and sculpted facial features.
Clearly, font-style="bold" can be seen here. But after this, the rendered version does not contain those styles.
Here's the full response:
"cart_count":2,
"images":[
],
"success":true,
"message":"Sucessfully",
"data":{
"product_id":1,
"name":"Dr G Butterfly Gua Sha",
"category_id":1,
"category":"Skin Tool",
"description":"<p>Dr G Butterfly Rose Quartz Gua Sha is a beauty and wellness tool designed to heal and enhance natural beauty. It lifts and sculpts your face, drains the lymph node, which reduces puffy eyes and face. By scraping with repeated strokes on the surface of the skin, this tool helps stimulate muscles and increases the blood flow. \n </p>\r\n\n\r\n<p><span style=\"font-weight: bold;\">Features</span> \n </p>\r\n\n\r\n<p>Gives even skin tone, smoother complexion and sculpted facial features. Reduces the signs of ageing and gives younger-looking skin. Increases lymphatic function. Stimulates blood circulation. Improves the appearance of dark circles and reduces under-eye puffiness. </p>\r\n\n\r\n<p><span style=\"font-weight: bold;\">How To Use \n</span></p>\r\n\n\r\n<p>Apply Dr G oil or Dr G gel as per your skin type covering the face and neck. </p>\r\n<p>Hold the butterfly gua sha tool firmly and sweep across gently up and out, starting with the neck, cheeks, jawline, chin, around the mouth, and slowly glide under the eyes, across your eyebrows and from your forehead up to your hairline. </p>\r\n<p>You can sweep it 3-5 times per area. </p>\r\n<p>Recommended at least a few times a week for best results. </p>\r\n\n\r\n<p><span style=\"font-weight: bold;\">About Dr G</span> \n </p>\r\n\n\r\n<p>Dr G offers luxury skincare products, backed by over a decade of dermatology expertise and on-ground practice. Made for Indian weather conditions, with variants for different skin types, including sensitive skin, and to address specific skin concerns - these innovative products are a perfect balance of nature and science. Drawing from ancient Ayurveda and combining natural extracts with skin-safe science, Dr G's range of products bridge modern skincare with holistic science.</p>",
"short_description":"Sculpts, Tones, Reduces Puffiness, Lifts",
"max_quantity":500,
"status":1,
"in_stock":1,
"measurement":[
{
"is_cart":true,
"ordered_quantity":2,
"is_wish":false,
"discounted_price":1400.0,
"weight":"200 Gram",
"price":1400.0,
"prod_id":1,
"percentage":100,
"max_quantity":500
}
]
}
}
The HTML from your response isn't valid. You can easily test it, if you copy the HTML string from your response to a text file with .html file ending and open it with your browser (index.html for example). Or use a validator like this one: https://www.freeformatter.com/html-validator.html
Let's pick one part from the HTML string which has wrong characters and gets displayed unformatted:
<span style=\"font-weight: bold;\">Features</span> \n
If you remove the backslashes \ here this peace gets rendered correctly:
<span style="font-weight: bold;">Features</span> \n
I would reccomend you to encode the HTML before sending it to the frondend. You could use Base64 which can be easily encoded in the backend and decoded on the frontend before displaying it.
If this "wrong" characters are already there when you recive this HTML (on your Backend) you have to parse it first to clean it.
Since HTML5 does not support Microsoft's <acronym> tag, we're left with using the abbreviation element:
<abbr title="Microsoft">MS</abbr>
When it comes to capitalization, cases like that are obvious: it needs to be capitalized.
However, what about other contexts where the word itself isn't usually capitalized in context?
For example:
<p>What is a <abbr title="chief technical officer">CTO</abbr>?</p>
That seems to be fine if one were to switch the title and actual text around.
But when hovering the mouse, it looks a bit odd:
The same goes for:
<p><abbr title="Chief technical officers">CTOs</abbr> are usually skilled technically.</p>
It makes sense if the abbreviation and actual text were switched around, but hovering also looks a bit "weird":
Now, what if we capitalize abbreviations as if they were titles?
For example:
<p>Wouldn't capitalizing <abbr title="Away From Keyboard">AFK</abbr> look weird?</p>
It would if the the title was substituted for the abbreviation, but on mouse-over it seems to look "better":
But what is right semantically?
The replacement text should reflect what the real text would be if it were substituted. Acronyms are generally not constructed from proper nouns, therefore the replacement text should be in all lower-case.
You'd never actually type "Chief Technical Officers" (unless you mistakenly thought they were proper nouns).
From the Chicago Manual of Style
Civil, military, religious, and professional titles are capitalized when they immediately precede a personal name and are thus used as part of the name (typically replacing the title holder’s first name). In formal prose and other generic text (as opposed to promotional or ceremonial contexts or a heading), titles are normally lowercased when following a name or used in place of a name
So it seems clear that you shouldn't capitalise CTO's (unless you mean the Central Treaty Organization).
I don't share your concern - the uncapitalised versions look fine to me. If it is for tooltip-style popups you could mandate all lowercase as house style.
and Away From Keyboard really does look weird...
(forgive my mixed spelling, uk-english quoting us-english...)
Not able to use rupee font in a select element in chrome,IE8
Im using a WebRupee to display the indian rupee currency. Font is displayed fine if its within a <p> tag but if i put it in a select option element the rupee is displayed properly only in firefox but not in chrome and IE8 (only displays R).
<select >
<option>$</option>
<option>£</option>
<option>€</option>
<option style="font-family:WebRupee;">R</option>
</select>
Demo
http://jsfiddle.net/WEJbc/3/
The INDIAN RUPEE SIGN U+20B9, which this is clearly about, is not ready for prime time on the Internet. Added to Unicode very recently, in version 6.0, it can be expected to be available in several commonly used fonts during the next ten years or so. Then you can use it as such, in UTF-8 encoded documents, or as the character reference ₹.
Meanwhile, use a currency name, or a currency abbreviation, or a currency code, or an existing special symbol like the RUPEE SIGN U+20A8 (₨). In a dropdown menu for currencies, localized names (such as “US dollar”) are best; e.g. the symbol “$” is used to denote dozens of currencies in the world.
Using <option style="font-family:WebRupee;">R</option> is a completely wrong approach, as it tries to change the meaning of a character (R) to something else by displaying it using a trick font. See e.g. http://www.alanflavell.org.uk/charset/fontface-harmful.html and http://alis.isoc.org/web_ml/html/fontface.en.html
Technically, for option the trick fails even in situations where it might seem to work in some contexts. The reason is that browsers may render option elements in a fixed font, disallowing any font change inside.
The trickery could be extended to the option elements by setting select { font-family: WebRupee; }, because IE lets you change the font of the entire dropdown menu, just not individual options. But in addition to all the problems of font trickery, this would fail because the WebRupee font has been designed so that it lacks the dollar sign ($), so that option would be displayed as empty.
Is there an HTML code for the text checkbox ''?
EDIT: So to be clear, I need the HTML Number for the symbol , not the form element checkbox.
U+F0FE is not a checkbox, it's a Private Use Area character that might render as anything. Whilst you can certainly try to include it in an HTML document, either directly in a UTF-8 document, or as a character reference like , you shouldn't expect it to render as a checkbox. It certainly doesn't on any of my browsers—although on some the ‘unknown character’ glyph is a square box that at least looks similar!
So where does U+F0FE come from? It is an unfortunate artifact of Word RTF export where the original document used a symbol font: one with no standard mapping to normal unicode characters; specifically, in this case, Wingdings. If you need to accept Word RTF from documents still authored with symbol fonts, then you will need to map those symbol characters to proper Unicode characters. Unfortunately that's tricky as it requires you to know the particular symbol font and have a map for it. See this post for background.
The standardised Unicode characters that best represent a checkbox are:
☐, U+2610 Ballot box
☑, U+2611 Ballot box with check
If you don't have a Unicode-safe editor you can naturally spell them as ☐ and ☑.
(There is also U+2612 using an X, ☒.)
This will do:
▢
It is ▢
(known as a "WHITE SQUARE WITH ROUNDED CORNERS" on fileformat.info)
Or
◻
as ◻
(known as a "WHITE MEDIUM SQUARE" on the same website)
Two with shadow:
❏
❑
as ❏ and ❑ . The difference between them is the shadows' shape. You can see it if you zoom in or if you print it out.
(They are known as "LOWER RIGHT DROP-SHADOWED WHITE SQUARE" and "LOWER RIGHT SHADOWED WHITE SQUARE", respectively).
You can also use
☐
which is ☐
(known as a "BALLOT BOX").
A sample is at http://jsfiddle.net/S2QCt/267/
(a note: on the Mac, ▢ is quite nice, because it is bigger and somewhat more elegant than ☐ On Windows, ☐ looks more standard, while ▢ is somewhat small.)
Use the Unicode Character
✔ = ✔
☑
this is a character . You can do copy/past without problem
I have compiled a list of all special square characters that are mentioned here, and more checkbox characters:
Unicode-Nr.
HTML-Code
Zeichen
Offizieller Name
Beschreibung
U+00058 (88)
X, X
X
LATIN CAPITAL LETTER X
Großer Buchstabe X
U+237B (9083)
⍻
⍻
NOT CHECK MARK
Durchgestrichenes Häkchen
U+2573 (9587)
╳
╳
LIGHT DIAGONAL CROSS
Dünnes diagonales Kreuz
U+25A1 (9633)
□, □
□
WHITE SQUARE
Weißes Quadrat
U+25A2 (9634)
▢
▢
WHITE SQUARE WITH ROUNDED CORNERS
abgerundetes Quadrat
U+25FB (9723)
◻
◻
WHITE MEDIUM SQUARE
mittleres Kästchen
U+2610 (9744)
☐
☐
BALLOT BOX (1)
Kästchen (für Wahl, Stimmzettel)
U+2611 (9745)
☑
☑
BALLOT BOX WITH CHECK (1)
Abgehaktes Kästchen
U+2612 (9746)
☒
☒
BALLOT BOX WITH X (1)
Angekreuztes Kästchen
U+2613 (9747)
☓
☓
SALTIRE
Andreaskreuz
U+26DD (9949)
⛝
⛝
SQUARED SALTIRE (2)
Quadrat-Andreaskreuz
U+26F6 (9974)
⛶
⛶
SQUARE FOUR CORNERS (2)
abgerundete Quadratecken
U+2705 (9989)
✅
✅
WHITE HEAVY CHECK MARK
Weißes fettes Häkchen
U+2713 (10003)
✓, ✓
✓
CHECK MARK
Häkchen
U+2714 (10004)
✔
✔
HEAVY CHECK MARK
Fettes Häkchen
U+2715 (10005)
✕
✕
MULTIPLICATION X
Kreuzchen als Malzeichen für Multiplikation
U+2716 (10006)
✖
✖
HEAVY MULTIPLICATION X
fettes Kreuzchen als Malzeichen
U+2717 (10007)
✗, ✗
✗
BALLOT X
Kreuzchen (wörtl. „Wahlkästchen-X“)
U+2718 (10008)
✘
✘
HEAVY BALLOT X
Fettes Kreuzchen
U+274C (10060)
❌
❌
CROSS MARK
Kreuzzeichen
U+274E (10062)
❎
❎
NEGATIVE SQUARED CROSS MARK
Negatives Kreuzzeichen im Quadrat
U+274F (10063)
❏
❏
LOWER RIGHT DROP-SHADOWED WHITE SQUARE
Weißes Quadrat unten rechts abgetrennt schattiert
U+2A2f (10799)
⨯, ⨯
⨯
BALLOT X
Kreuzchen (wörtl. „Wahlkästchen-X“)
U+1F5F8 (128504)
🗸
🗸
LIGHT CHECK MARK (1,2)
Dünnes Häkchen
U+1F5F9 (128505)
🗹
🗹
BALLOT BOX WITH BOLD CHECK (1,2)
Fett abgehaktes Kästchen
U+1F7AC (128940)
🞬
🞬
HEAVY SALTIRE (1,2)
Fettes Andreaskreuz
All of these glyphs are displayed mostly correctly on my Windows 10 notebook (Edge, Chrome, Firefox) and my smartphones, but:
(1) not under Android 10, Samsung S9
(2) not under iOS 14, iPhone 7
see https://blog.dmr-solutions.com/blog/checkbox-zeichen-in-html (in german)
This is the code for the character you posted in your question:
But that's not a checkbox character...
Just make sure that your HTML file is encoded with UTF-8 and that your web server sends a HTTP header with that charset, then you just can write that character directly into your HTMl file.
http://www.w3.org/International/O-HTTP-charset
If you can't use UTF-8 for some reason, you can look up the codes in a unicode list such as http://en.wikipedia.org/wiki/List_of_Unicode_characters and use ꯍ where ABCD is the hexcode from that list (U+ABCD).
As this has already been properly answered, I'd just add the following site as a reference:
Unicode Table
You can search for "check", for example.
Before coming here, I tried myself by googling. After I read these two links
http://www.w3schools.com/tags/tag_bdo.asp
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_bdo
I still don't understand clearly what is the practical purpose?
Thanks in advance for those who shed some light on this.
Pretty striaghtforward. If you're writing a web page using a default language, such as English, that is rendered left-to-right, and you want to include a island of text in another language, such as a quote in Hebrew, that is rendered right-to-left you can use this tag to override the base direction in which the text is written onto the page in case the bi-directional algorithm is getting it wrong. You need to make sure that the font you're using supports the appropriate character set too, of course.
http://www.w3.org/TR/html40/struct/dirlang.html
I tried the code bellow, and noticed that it is apparently obsolete for Hebrew, at least:
<!DOCTYPE html>
<html>
<body>
<p>If your browser supports bi-directional override (bdo), the next line will be written from right to left (rtl):</p>
<p>חדשות, ידיעות מהארץ והעולם - עיתון הארץ</p>
<bdo dir="rtl">חדשות, ידיעות מהארץ והעולם - עיתון הארץ</bdo>
</body>
</html>
Both seemed to output the same line, which confused me, but prompted a search that lead me to the following article:
The bidirectional ordering of text in AbiWord is done automatically,
closely following the Unicode Bidirectional Algorithm (UBA; see the
Unicode Consortium website). The Unicode character set assigns each
character certain directional properties which are then used by the
UBA to order text. Thus, Hebrew or Arabic characters will
automatically be treated as right-to-left, and English characters as
left-to-right. There are some characters that are directionally
ambiguous, and how they are treated by the UBA depends on what
characters are found in their vicinity (this includes all white space
and punctuation characters).
http://fantasai.tripod.com/qref/HTML4/structure/bdo.html
Hope it helps