What are the HTML entity character codes for this up arrow (▲) and its downward-facing dog version (▼) ?
I've been using GIFs to represent these arrows since I don't know their codes.
The Big and small black triangles facing the 4 directions can be represented thus:
▲ ▲
▴ ▴
▶ ▶
▸ ▸
► ►
▼ ▼
▾ ▾
◀ ◀
◂ ◂
◄ ◄
▲ is U+25B2 BLACK UP-POINTING TRIANGLE and it's decimal character entity is ▲
▼ is U+25BC BLACK DOWN-POINTING TRIANGLE and it's decimal character entity is ▼
I usually use the excellent Gucharmap to look up Unicode characters. It's installed on all recent Linux installations with Gnome under the name "Character Map". I don't know of any equivalent tools for Windows or Mac OS X, but its homepage lists a few.
There are several correct ways to display a down-pointing and upward-pointing triangle.
Method 1 : use decimal HTML entity
HTML :
▲
▼
Method 2 : use hexidecimal HTML entity
HTML :
▲
▼
Method 3 : use character directly
HTML :
▲
▼
Method 4 : use CSS
HTML :
<span class='icon-up'></span>
<span class='icon-down'></span>
CSS :
.icon-up:before {
content: "\25B2";
}
.icon-down:before {
content: "\25BC";
}
Each of these three methods should have the same output. For other symbols, the same three options exist. Some even have a fourth option, allowing you to use a string based reference (eg. ♥ to display ♥).
You can use a reference website like Unicode-table.com to find which icons are supported in UNICODE and which codes they correspond with. For example, you find the values for the down-pointing triangle at http://unicode-table.com/en/25BC/.
Note that these methods are sufficient only for icons that are available by default in every browser. For symbols like ☃,❄,★,☂,☭,⎗ or ⎘, this is far less likely to be the case. While it is possible to provide cross-browser support for other UNICODE symbols, the procedure is a bit more complicated.
If you want to know how to add support for less common UNICODE characters, see Create webfont with Unicode Supplementary Multilingual Plane symbols for more info on how to do this.
Background images
A totally different strategy is the use of background-images instead of fonts. For optimal performance, it's best to embed the image in your CSS file by base-encoding it, as mentioned by eg. #weasel5i2 and #Obsidian. I would recommend the use of SVG rather than GIF, however, is that's better both for performance and for the sharpness of your symbols.
This following code is the base64 for and SVG version of the icon :
/* size: 0.9kb */
url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAxNiAyOCI+PGcgaWQ9Imljb21vb24taWdub3JlIj48L2c+PHBhdGggZD0iTTE2IDE3cTAgMC40MDYtMC4yOTcgMC43MDNsLTcgN3EtMC4yOTcgMC4yOTctMC43MDMgMC4yOTd0LTAuNzAzLTAuMjk3bC03LTdxLTAuMjk3LTAuMjk3LTAuMjk3LTAuNzAzdDAuMjk3LTAuNzAzIDAuNzAzLTAuMjk3aDE0cTAuNDA2IDAgMC43MDMgMC4yOTd0MC4yOTcgMC43MDN6TTE2IDExcTAgMC40MDYtMC4yOTcgMC43MDN0LTAuNzAzIDAuMjk3aC0xNHEtMC40MDYgMC0wLjcwMy0wLjI5N3QtMC4yOTctMC43MDMgMC4yOTctMC43MDNsNy03cTAuMjk3LTAuMjk3IDAuNzAzLTAuMjk3dDAuNzAzIDAuMjk3bDcgN3EwLjI5NyAwLjI5NyAwLjI5NyAwLjcwM3oiIGZpbGw9IiMwMDAwMDAiPjwvcGF0aD48L3N2Zz4=
When to use background-images or fonts
For many use cases, SVG-based background images and icon fonts are largely equivalent with regards to performance and flexibility. To decide which to pick, consider the following differences:
SVG images
They can have multiple colors
They can embed their own CSS and/or be styled by the HTML document
They can be loaded as a seperate file, embedded in CSS AND embedded in HTML
Each symbol is represented by XML code or base64 code. You cannot use the character directly within your code editor or use an HTML entity
Multiple uses of the same symbol implies duplication of the symbol when XML code is embedded in the HTML. Duplication is not required when embedding the file in the CSS or loading it as a seperate file
You can not use color, font-size, line-height, background-color or other font related styling rules to change the display of your icon, but you can reference different components of the icon as shapes individually.
You need some knowledge of SVG and/or base64 encoding
Limited or no support in old versions of IE
Icon fonts
An icon can have but one fill color, one background color, etc.
An icon can be embedded in CSS or HTML. In HTML, you can use the character directly or use an HTML entity to represent it.
Some symbols can be displayed without the use of a webfont. Most symbols cannot.
Multiple uses of the same symbol implies duplication of the symbol when your character embedded in the HTML. Duplication is not required when embedding the file in the CSS.
You can use color, font-size, line-height, background-color or other font related styling rules to change the display of your icon
You need no special technical knowledge
Support in all major browsers, including old versions of IE
Personally, I would recommend the use of background-images only when you need multiple colors and those color can't be achieved by means of color, background-color and other color-related CSS rules for fonts.
The main benefit of using SVG images is that you can give different components of a symbol their own styling. If you embed your SVG XML code in the HTML document, this is very similar to styling the HTML. This would, however, result in a web page that uses both HTML tags and SVG tags, which could significantly reduce the readability of a webpage. It also adds extra bloat if the symbol is repeated across multiple pages and you need to consider that old versions of IE have no or limited support for SVG.
You don't need to use character codes; just use UTF-8 and put them in literally; like so:
▲▼
If you absolutely must use the entites, they are ▲ and ▼, respectively.
▲ is the Unicode black up-pointing triangle (▲) while ▼ is the black down-pointing triangle (▼).
You can just plug the characters (copied from the web) into this site for a lookup.
Check this page http://www.alanwood.net/unicode/geometric_shapes.html, first is "9650 ▲ 25B2 BLACK UP-POINTING TRIANGLE (present in WGL4)" and 2nd "9660 ▼ 25BC BLACK DOWN-POINTING TRIANGLE (present in WGL4)".
Related
I try to add an Emoji (♥) to my HTML Code and show it with Chrome.
<p>♥</p>
The heart is showing by the old Unicode Version 1.1 and because of that it is black:
How can i add the Emoji and show it in this new version?
The code point for that emoji is U+2764 — HEAVY BLACK HEART. The ‘black’ refers to pre-emoji times, when this character was filled up (instead of only an outline).
You can append U+FE0F — VARIATION SELECTOR-16 to explicitly specify the colored version. U+FE0E will specify black/white:
U+2764: ❤
U+2764, U+FE0E: ❤︎
U+2764, U+FE0F: ❤️
The results are probably browser and system dependent, and dependent on what fonts are used. For me (Firefox / Windows 10) the first two above are black, while the third one is red.
Well I suppose it depends from the font you are using. You should find a webfont that is containing the emoji in the style you want and apply it to your page.
If you do not know web fonts take a look to https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts
I was curious how Imgur was rendering their upvote/downvote arrows:
I assumed they were images, but I found something that I did not expect:
A custom font that contains glyphs for up and down arrows, mapped to the 'o' and 'x' characters, respectively:
Is this method considered acceptable these days? I have never considered using a custom font for something that doesn't semantically map into an alphabet. This approach is not even on my radar of best practices for web design.
I can imagine the reasons for:
Your site uses a standard icon set that can be mapped to single-character codes.
You only need control over foreground/background color for the icons.
You want icons that scale the same as text.
I want to know any specific reasons against using this method.
In particular, I'm looking for answers that address any of the following:
browser/platform compatibility
future maintenance implications
semantics
performance
standards compliance
The only thing I have come up with so far, is that, semantically, it does not make sense to map an upvote icon to the character 'o' and a downvote icon to the character 'x'. And, just to be specific, I'm not talking about keyboard mappings, but rather language mappings, character codes. It seems to me that raster images or SVG are much more preferable alternatives in this case.
I thought of one other possibility: language and encoding compatibility. Would the html lang attribute or character encoding of the page have any effect on the character mappings into the font in the CSS stylesheet (the stylesheet uses 'x' to represent a downvote icon)?
However, I'm certain Imgur has thought all of this through already. So, why am I wrong?
Modern browsers (e.g. IE9 above) support custom fonts.
Even Bootstrap also uses custom fonts for icons, known as Glyphicons! It is a nice way to beautify the websites icons without having to do it from Photoshop as an image which may cause responsive issues.
They are usually used by calling the class name which links to the CSS that call the icons from the font family. Html lang would not have any issues with it.
Many websites use "icon fonts". But yes, assigning language letters to them would be wrong. It would be best to assign an arrow icon to the Unicode character code for a similar arrow. Another option would be to use the Private Use Area of Unicode. In this case, if your font fails to load for any reason, you won't have a good fallback strategy. But if you choose meaningful char codes for your icons, you would.
Many people are in favor of using SVGs over icon fonts. But there are pros and cons to both icon fonts and SVGs. I think that it's great that as web developers, we get to choose among different implementations or solutions to the same problem.
To answer your question, I would say that if done right, there is nothing wrong with using fonts for implementing icons.
As Mike 'Pomax' Kamermans put it:
"Fonts are for encoding vector graphics that are to be used in
typesetting context. That can mean letters, or icons, or emoji"
One big reason is accessibility. There are many browser extensions which swap out a website's font for one that's more legible for people with different visual impairments. If you use fonts for your icons, these will be swapped out too, leaving your user looking at whatever string you placed in for your icons.
I have a page which contains some HTML-encoded Unicode characters: ▲ (▲), ▼ (▼), ◄ (◄), ► (►) and ✓ (✓). Some users complain about some of these not showing up in their browser.
What is the best way to solve this without installing fonts on the users' machines? Do I have to make bitmaps for each Unicode character? If yes, is there a tool to convert characters to bitmaps? Or is there a better way?
As this is primarily a font problem, the alternatives are to use a downloadable font, also known as web font, via #font-face, and to use images instead of characters. I wrote “primarily”, because there is an additional difficulty: some browsers will not display some characters unless they can be found in the fonts listed in the applicable font-family list. For generalities on these issues, see my Guide to using special characters in HTML.
In this special case, the character “✓” may cause problems since it is present in relatively few fonts. I would expect the others to be OK in most cases, but my expectation was wrong: Android (2.x) shows ▲ and ▼ OK, but not ◄ and ►.
Using a downloadable font to get such characters rendered might be overkill, so it might be best to use images. You can just write the character in some program using some suitable font in large size, take screen captures of each, and save them as images. Then you would use them via img tags, setting the heights of the images to suitable height in CSS, using the em unit. The reason is that this way they will look good in different font sizes – adapting to font size, and scaling downwards tends to produce better results than scaling upwards.
If you take this way, then it is best to represent all of ▲, ▼, ◄, ► as images, to make them stylistically matching.
Simply use UTF-8 for encoding of your pages and in case some fonts are missing those symbols use Arial, because it contains them all.
Does anyone know from where I can get this http://screencast.com/t/Od362Z8Glgu character, I mean the arrow, I need one just like that to copy & paste in my html file.
It is a unicode character: ▶ = ▶
http://www.fileformat.info/info/unicode/char/25b6/index.htm
See: What characters can be used for up/down triangle (arrow without stem) for display in HTML?
See Here. The character you are looking for is ▶, ▶
Like this ▷?
http://www.fileformat.info/info/unicode/char/25b7/index.htm
There are several correct ways to display a right-pointing triangle.
Method 1 : use decimal HTML entity
HTML :
▶
Method 2 : use hexidecimal HTML entity
HTML :
▶
Method 3 : use character directly
HTML :
▶
Method 4 : use CSS
HTML :
<span class='icon-right'></span>
CSS :
.icon-right:before {
content: "\25B6";
}
Each of these three methods should have the same output. For other symbols, the same three options exist. Some even have a fourth option, allowing you to use a string based reference (eg. ♥ to display ♥).
You can use a reference website like Unicode-table.com to find which icons are supported in UNICODE and which codes they correspond with. For example, you find the values for the down-pointing triangle at http://unicode-table.com/en/25BC/.
Note that these methods are sufficient only for icons that are available by default in every browser. For symbols like ☃,❄,★,☂,☭,⎗ or ⎘, this is far less likely to be the case. While it is possible to provide cross-browser support for other UNICODE symbols, the procedure is a bit more complicated.
If you want to know how to add support for less common UNICODE characters, see Create webfont with Unicode Supplementary Multilingual Plane symbols for more info on how to do this.
Background images
A totally different strategy is the use of background-images instead of fonts. For optimal performance, it's best to embed the image in your CSS file by base-encoding it, as mentioned by eg. #weasel5i2 and #Obsidian. I would recommend the use of SVG rather than GIF, however, is that's better both for performance and for the sharpness of your symbols.
This following code is the base64 for and SVG version of the icon :
/* size: 0.9kb */
url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAxNiAyOCI+PGcgaWQ9Imljb21vb24taWdub3JlIj48L2c+PHBhdGggZD0iTTE2IDE3cTAgMC40MDYtMC4yOTcgMC43MDNsLTcgN3EtMC4yOTcgMC4yOTctMC43MDMgMC4yOTd0LTAuNzAzLTAuMjk3bC03LTdxLTAuMjk3LTAuMjk3LTAuMjk3LTAuNzAzdDAuMjk3LTAuNzAzIDAuNzAzLTAuMjk3aDE0cTAuNDA2IDAgMC43MDMgMC4yOTd0MC4yOTcgMC43MDN6TTE2IDExcTAgMC40MDYtMC4yOTcgMC43MDN0LTAuNzAzIDAuMjk3aC0xNHEtMC40MDYgMC0wLjcwMy0wLjI5N3QtMC4yOTctMC43MDMgMC4yOTctMC43MDNsNy03cTAuMjk3LTAuMjk3IDAuNzAzLTAuMjk3dDAuNzAzIDAuMjk3bDcgN3EwLjI5NyAwLjI5NyAwLjI5NyAwLjcwM3oiIGZpbGw9IiMwMDAwMDAiPjwvcGF0aD48L3N2Zz4=
When to use background-images or fonts
For many use cases, SVG-based background images and icon fonts are largely equivalent with regards to performance and flexibility. To decide which to pick, consider the following differences:
SVG images
They can have multiple colors
They can embed their own CSS and/or be styled by the HTML document
They can be loaded as a seperate file, embedded in CSS AND embedded in HTML
Each symbol is represented by XML code or base64 code. You cannot use the character directly within your code editor or use an HTML entity
Multiple uses of the same symbol implies duplication of the symbol when XML code is embedded in the HTML. Duplication is not required when embedding the file in the CSS or loading it as a seperate file
You can not use color, font-size, line-height, background-color or other font related styling rules to change the display of your icon, but you can reference different components of the icon as shapes individually.
You need some knowledge of SVG and/or base64 encoding
Limited or no support in old versions of IE
Icon fonts
An icon can have but one fill color, one background color, etc.
An icon can be embedded in CSS or HTML. In HTML, you can use the character directly or use an HTML entity to represent it.
Some symbols can be displayed without the use of a webfont. Most symbols cannot.
Multiple uses of the same symbol implies duplication of the symbol when your character embedded in the HTML. Duplication is not required when embedding the file in the CSS.
You can use color, font-size, line-height, background-color or other font related styling rules to change the display of your icon
You need no special technical knowledge
Support in all major browsers, including old versions of IE
Personally, I would recommend the use of background-images only when you need multiple colors and those color can't be achieved by means of color, background-color and other color-related CSS rules for fonts.
The main benefit of using SVG images is that you can give different components of a symbol their own styling. If you embed your SVG XML code in the HTML document, this is very similar to styling the HTML. This would, however, result in a web page that uses both HTML tags and SVG tags, which could significantly reduce the readability of a webpage. It also adds extra bloat if the symbol is repeated across multiple pages and you need to consider that old versions of IE have no or limited support for SVG.
The nicest looking right arrow, especially nice for breadcrumbs is the "right angled arrow" › html entity
I am aware that any Unicode character can be inserted into an HTML document via the following format:
...where 0000 is the character code of the desired character
My question is: which of these characters has the most widespread availability when it comes to the client's browser being able to display the character?
In other words, what are the ranges of codes that should be used in an HTML document that is going to be widely deployed?
Whether you enter them via &#xNNNN; character reference or just by typing or copy-pasting them directly into the page, it's purely a question of fonts. If the user has a glyph for the character in the fonts their web browser knows about, it'll work. If they don't, it'll be a little box.
fileformat.info have font-availability details that can be of help for guessing how widespread glyph support is. eg. hit the Fonts link on this page for U+25B6. For me, this renders on most platforms but not on a vanilla XP install with IE6 (IE7 picks it up from Lucida Sans Unicode which IE6 FSR doesn't bother look at).
◄ ► U+25C4, U+25BA Left/Right-Pointing Pointer glyphs seem to be more widely available than
◀ ▶ U+25C0, U+25B6 Left/Right-Pointing Triangle glyphs
so I'd use those instead. In particlar they render in XP+IE6 with default fonts because they are present in Arial. Which renders them more like Triangle than Pointer is supposed to be. (sigh) OTOH its up/down Triangles are fine.
SO uses ► for list bullets in the ‘how to format’ box over there. ⇗
[response to comment in edit instead of comment as site JS appears to be playing up]
There's also ‣, U+2023 Triangular Bullet, which is in a block of widely-available typographical-niceties. Unfortunately, again, it's not in Arial or other fonts IE6 on a default XP will use. Neither is ▸ U+25B8 Black Right-Pointing Small Triangle.
French-style quotes (guillemets) ‹ › « » will be available absolutely everywhere, but using them for arrows might be considered a bit of an abuse.