From where can I get a right pointing arrow character? - html

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

Related

Listing the Icons/Glyphs used with a font and "content:'\value'"

I am editing a pre-existing site that makes use of icons/glyphs in a multitude of files like eot, svg, w0ff, ttf (I guess for various compatibility). It calls these with the use of the font and a CSS value like this:
font-family: icons_filename;
content: "\e601";
So how would I find a list of the different values of the icons called with "content"?
In other words, I am trying to see what is possible in an undocumented library of icons that don't necessarily have a good list of names.
I also don't understand how the value "\e601" is used or how to look that up in a file. This part of CSS is unfamiliar to me and I cannot find a good explanation for this as most icon tutorials only show how to use a documented library.
Thanks
I believe you're looking for UTF-8 characters. Icon fonts generally override the default font on this universal icon font if they exist. Here's a link to where you can view them.
Adding onto what Chris already said, you should be able to track down which font icon library your template/theme is utilizing. One of the most common examples of these would be Font Awesome.
From the link above, you'll have the ability to go through each icon and figure out which "unicode" to select. For example, "fa-blind" (blind man walking icon) has a unicode of "f29d", which translates to "\f29d" when using it for the CSS property "content"
If your stylesheet is served in UTF-8, you can avoid the need for unicodes (f29d in our example), and directly copy/paste the icon should it be listed on a site for you (i.e, instead of "\f29d" in the content, it'll be the actual fa-blind icon glyph. It'll show up as a blank square in your CSS document, but will render properly when you're on the webpage.)
I might've gone on too long here, but ultimately what you need to do is figure out which library of icons the site is utilizing. We could easily figure it out for you if a link is provided.

Inkscape wrapping text boxes not visible in HTML

I'm using Inkscape to design SVG graphics I want to include in an HTML page. Text boxes that use line wrapping seem not to render when included in an HTML page. Is there a fix for this?
One of the problems associated with rendering SVG files is that your target browsers may not have access to the fonts you have on your machine. Additionally, you may find that Inkscape renders to one format of the SVG standard - or even a non-standard extension - whereas browsers may use a different standard.
Fonts are a particular problem in this regard. Thus one solution, if you do not need dynamic text, is to convert fonts to line paths. Bear in mind that it is worth checking your font licensing here - it is possible that you may need a publishing license even if you have converted the string to paths.

Is there any reason not to use a custom font for icons on a web site?

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.

tm symbol wont show up as it should in html, sm symbol works tho

i cant make the TM symbol to show up as it should, the SM symbol is working fine. The test page you can see is located at http://codita.ro/test/
I have deleted both reset.css and normalize.css and its not because of the resets..
Here's the page if you can track this down so i dont have to wrap the symbol in a span across the site to make it look smaller.
example of code:
the SkinLaze™ aesthetic
The symbol “™” is there, just pointlessly small (I copypasted it from the page into this message). This is a flaw in the design of the font being used.
If you cannot change the font, consider using a different font for “™” and probably for “©” too (it looks broken). The simple way to do this is to wrap the occurrences in span elements with class and use CSS to set the font on them. A more modern, but somewhat less cross-browser way, is to use #font-face with unicode-range.
The reference ™ is incorrect by the specs; ™ and ™ are correct. But nowadays all browsers accept ™ too.
You need to use HTML entities for that character. Use ™ in your HTML. More about HTML Entities you can find out under this link
It looks to me like the font you're using, Tinos Regular, doesn't support the trademark symbol.
I'm no expert on workarounds for this sort of thing, but the first that springs to mind is to drop back to a font that includes the glyph:
/* CSS */
.fallback-font {
font-family: serif;
}
<!-- HTML -->
This is trademarked<span class="fallback-font">™</span>.
EDIT: While our solutions are basically the same, I'd defer to Jukka on this one, who clearly knows what he's talking about more than I do :D
On my tool AmpWhat HTML entity reference, use the "f" button at the bottom to try out different fonts. Some have custom glyphs, and some fallback to other fonts. Although not its primary purpose, you can explore what characters are supported in different fonts.
Alternatively, use suptm element, as in <sup>tm</sup>.

HTML character codes for this ▲ or this ▼

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