I see some websites use fancy icons. An example is this curly leaf icon at Dive Into HTML5:
❧
I would like to know the formal name of these icons. I've tried searching "html entities" and "html glyphs" in Google but the results always show the boring old arrows and Greek characters.
This is a unicode character.
If you are using UTF-8 encoding - which the example site is - you have a very large range of characters you can use - not just arrows and greek characters.
I'd encourage you to use Firebug or some other developer inspector in your browser. It makes it very easy to reverse engineer things like this.
These don't have any particular name as far as I know, they are simply Unicode glyphs. Here is a table.
Related
like the house/home symbol is ⌂, I need the most popular symbol codes for a website, like contact us, about us, home, etc.
Thanks in advance for any help.
The notation ⌂ (which should really include the semicolon) is just a reference to the character with Unicode code number 8962 in decimal. You can use similar notations for all Unicode characters, so the ultimate reference would be the Unicode Standard, and in practice you might want to look at the Code Charts for symbols there. The symbol denoted by ⌂, U+2302 HOUSE, is in the Miscellaneous Technical block.
However, most Unicode characters are not supported by most fonts. The real problem with using special characters like “⌂” is with font support and with users’ difficulties in guessing what you mean by such characters (if the users are lucky enough to see them). This is why images are generally recommended for icon-like symbols.
Ok, so I want to have the characters from below in my html page. Seems easy, except I can't find the HTML encoding for them.
Note: I would like to do this without having sized elements, plain ol' text would be fine ^_^.
Cheers.
You can see that they have a unicode number of the selected character - at the bottom of the picture ("U+266A: Eighth Note").
Simply use the last portion in a unicode character entity: ♪ - ♪
If your page is already UTF-8, you can simply paste it in.
Try encoding it as █ - that should do the trick!
In a UTF-8 encoded page, just copy and paste them as-is.
Otherwise, use the number that the dialog gives you for each character, e.g. ♪
However, when working with rather exotic characters, be very wary of font support. See e.g. this question for background: Unicode support in Web standard fonts
This page gives some information about support for the characters you want to use. They seem to be relatively well supported, but a test on Linux and Mac machines won't hurt.
Here is one comprehensive entity reference. If you want to convert symbols into their entity counterparts, I suggest using this converter.
My suggestion is to use hexadecimal reference. ( it's easy dont worry :) )
for example, the first character you have highlighted in red got ascii value of 175, which is AF in hex.
So in short you can encode it using %AF, and so on...
is it clear mate? Let me know if you need further explanation or help about this :)
Edit: my post is meant for url encoding.
I've already found a good site to convert HTML character codes to their respective glyphs:
http://www.public.asu.edu/~rjansen/glyph_encoding.html
However, I need a bit more information. Does anyone know of a site like the one above that also provides information on what type of character code it is? Meaning, is it a special character? Is the glyph visible? Etc...
So far I have found some tables with this information, but they aren't as complete as the resource above. I would really like to get my hands on a complete table.
Thanks,
-Ben
HTML Entity Character Lookup
I like FileFormat.Info--e.g.: http://www.fileformat.info/info/unicode/char/20ac/index.htm
The character map on Ubuntu (and I assume most other Linux distros) is fantastic. You can search for any character by its name or description (e.g. "arrow") really easily.
Windows' character map is a poor imitation but kinda works too. It seems to decide that certain fonts (Arial, Verdana etc) can't display some characters, even though they work absolutely fine. (Hint: try MS's more recent font creations like Calibri for better results.)
Once you've found a character you can either:
Copy it and use it directly (requires pages to be UTF-8) like this: ↗
Insert it as a hexadecimal entity. The above character is "U+2197 North East Arrow" so the entity would be ↗
Convert the hex code to decimal (the calculators on Windows and Linux can do this). The above example is ↗
Here's a quick, low-footprint way to look them up: &what;
I've found the outlined versions, but I want the solid up and down triangles.
Does anyone know these entities?
All named HTML entities are specified in chapter 24 of the HTML standard. The only thing missing from the page are rendered entities, but you can easily create your own copy with the additional information by applying a simple regexp:
s/<!ENTITY (\S+)/<!ENTITY \1 &\1;/
Not all entities are named. For many, you need to specify the Unicode code page, either in decimal (▲ ▲, ▼ ▼) or hex (▲ ▲, ▼ ▼).
A little but late, but you can use ▾ ▾, and ▴ ▴, to make both the up and down filled in triangles. I was looking for it myself and the alt codes didn't help so I decided to share this. This same thing works for both left and right as well.
I don't know if I've ever seen what you're looking for. Maybe a better way of doing it would be to create the arrows in Photoshop on a transparent background (.gif or .png format), and then load up the images.
Check that, you can do it through alt characters.
http://www.tedmontgomery.com/tutorial/ALTchrc.html
▼ ▲
using the alt characaters on your computer keyboard is a big no no if you are working on a web page for many reasons. #1. encoding of the website, encoding of the database driving the website if any, the codepage of the computer view the website, the codepage your own pc's keyboard is set to.. all that are mostly factors you can not control. So some people will see wonky weird letter combos or sqiggle characters instead of what you intend. For webpages use the html codes for those characters when ever you can. or at least entity encode and make sure you have your code page defined in your html header of your site.. that way people will see what you intend them to.
now if you are doing this in word for a document that will be viewed in your own country you are probably safe. But for online things (site coding or data entry) you should avoid this like the plague.
I would like to print some kind of ASCII "art" on a web page in pre-tags. These graphics use DOS characters to show a map like old maze games did. I didn't find anything in the HTML special character reference. Is there a way to use these characters in HTML ?
Thanks in advance.
With the right Unicode characters, the old character encodings shouldn't make much odds. The tricky bit may be converting existing ASCII art into Unicode - at which point you need to know the original encoding.
The relevant code charts will be listed on the Unicode "symbols" charts page. In particular, I suspect you'll find the box drawing and block elements charts useful.
You'll need to make sure that your page uses a font which contains the right characters, of course...
As an example, you can render this:
┌┐
└┘
With:
<pre>┌┐
└┘</pre>
Not quite a proper box, but getting there...
You can send them in the <pre> tags, although in XHTML you'll need to encapsulate it in <![CDATA[[]> I think. Be careful though, not all encodings render this correctly. For example, a lot of ASCII art designed for DOS code page 430 (US) fails over here in the UK (830). Eastern Europe suffers especially.
I think the best approach here would be to render images.
EDIT: Oh. You could try , but I'm not sure if that would work.