*

HTML Assorted Arrows

HTML Shaped Arrows

HTML Right Pointers

HTML Basic Shapes

HTML Punctuation

HTML Legal symbols

HTML Currency, Money

HTML Math, Fractions, Percentages

HTML Music Notes

HTML Checkmarks, X and boxes

HTML Crosses

HTML Stars, Asterisks, Snowflaks

HTML Miscellaneous

HTML Hands, Pencils and Pens

HTML Sky, Planets

HTML Zodiac Signs

HTML Chess, Playing Cards

HTML Greek Alphabet


A ton of cool, special characters you can use in your web designs today!

My name is Neal Chester and I'm a web developer and consultant. Sometimes I use special characters as an alternative to images; many of these characters I never knew existed.

When I surfed the Web, I always ran into 3 problems with character listings:

  1. They contained tons of characters I didn't use
  2. There was no one list that brought together all the characters I needed
  3. The fonts were too small and the page was difficult to use

So I made my own listing page containing the best HTML characters I felt would be useful to everyone, especially web developers. I grouped them into sections and included the HTML, CSS and JS name & number codes for your convenience. Enjoy.


Rendering Characters

As you'll notice, some characters will render differently depending on the browser. For example, the snowman in Firefox looks different from the snowman in Chrome. Or, the diamond shape in IE is larger compared to Chrome's.

Depending on the browser, some characters won't display. The reason is because of a bug in the browser, not the code. I believe Chrome knows about the bug and will fix it soon – I don't know about the other browsers.

Therefore, it's important to view the characters in different browsers and mobile devices to determine if you want to use that character. The great thing is: 98% of the characters display across all browsers.

How To Use

First of all, make sure you're using the correct unicode. UTF-8 has become the standard character encoding for the Web. Simply drop this code <meta charset="utf-8"/> between your <head> tags.

To be more explicit about the charset and to eliminate the possibility of the apache server (which most people are on) overriding the character set, you can update your .htaccess file by adding the following:

AddDefaultCharset utf-8

AddCharset utf-8 .html .css .js .xml .json .rss .atom

Next, markup your HTML as follows. For example: The number code for that large asterisk is 10033. It should be written like this &#10033; If there's a name code, you can use that instead. For example: The pointing arrow name code is: rarr it should be written like this &rarr; notice how there's no hash symbol.

When using special characters in your CSS, use the second number code. This time 2731 would be written like this \2731. The backslash must be there or it won't render the character. The same hexadecimal number must be used in javascript as well. The only difference is it must be written like this \u2731. Notice the backslash followed by the lowercase u.

All the characters on this pages are styled with the font family Times, Serif. I recommend this font style for all characters if you want some consistency across browsers.


Aligning Special Characters

It's a good chance you'll be using the characters aside text, so I added some guides i to show you how the characters compare. The top line represents the text top, the middle line represents the middle of the line, and the bottom line is the base.

  • Jj✱
  • Jj➽
  • Jj†
  • Jj☺

As you can see from the examples, characters are aligned differently. Some span from top to bottom making them equal to a capital letter. Others stay in the middle of the line, and some start from the base up, but don't quite reach the text top.

I also noticed that if you change the font style from serif to sans-serif or to monospace, the alignment may change. This is why I recommend using the same font style to keep the consistency across browsers.

If you want them to be equal to a capital letter, you can use CSS. You can create a class and call it .charfix and wrap the character in a span tag. Notice the fix below:

  • Jj
  • .charfix { 
    font-size:130%; line-height:0; }

I've found that 130% works best, allowing you to apply the fix to any character – anywhere – and you won't have to do the sizing all over again. I set the line-height to 0 to eliminate the shift in the normal line height of the space the character sits in.

Now of course this only applies to base fonts that don't reach the text top – you'll have to experiment in other cases.


Rotating Characters

Some sets only have a right pointing arrow and you may need them to point left, or to the upper left-right or in any direction. To do this we can use CSS. Once again, we can wrap the character in a tag, add a class, and apply the following styles to it:

.pointleft {
   -webkit-transform: rotate(-180deg);
   -moz-transform: rotate(-180deg);
   -ms-transform: rotate(-180deg);
   -o-transform: rotate(-180deg);
   transform: rotate(-180deg);
   filter: progid:DXImageTransform.Microsoft.Matrix( 
    M11=-1, M12=1.2246063538223773e-16, 
    M21=-1.2246063538223773e-16, 
    M22=-1, sizingMethod='auto expand');
   zoom: 1;
 }

Of course, you can modify and repeat this for any direction you like. The following works in IE6+, Chrome, Firefox, Safari and Opera. The last style is for IE6-8. Microsoft's filter is a bit messy, but the code was generated by www.css3please.com. I recommend that you use that site to generate the correct code for older IE browsers.


If you find any errors, let me know. If you have any suggestions/requests, or if you've done some really cool things with special characters, I'd like to see them. Contact me here.



 ____  ____  _____ ____ ___    _    _     
/ ___||  _ \| ____/ ___|_ _|  / \  | |    
\___ \| |_) |  _|| |    | |  / _ \ | |    
 ___) |  __/| |__| |___ | | / ___ \| |___ 
|____/|_|   |_____\____|___/_/   \_\_____|                              

  ____ _                          _                
 / ___| |__   __ _ _ __ __ _  ___| |_ ___ _ __ ___ 
| |   | '_ \ / _` | '__/ _` |/ __| __/ _ \ '__/ __|
| |___| | | | (_| | | | (_| | (__| ||  __/ |  \__ \
 \____|_| |_|\__,_|_|  \__,_|\___|\__\___|_|  |___/


-----------------------------------------------------

/* CREDITS */
   Created by: Neal Chester of CWC
      Website: http://chesterwebconsulting.com

/* SITE */
  Last Update: 12/09/2011
    Tech Used: HTML5, jQuery, CSS3
   Tools Used: Notepad++

-----------------------------------------------------