*

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 char­acters 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 stack Times, Serif.

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
      Website: http://nealchester.com

/* SITE */
  Last Update: 05/25/2017
    Tech Used: HTML5, jQuery, CSS3
   Tools Used: Notepad++

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