How to create symbols on your blog, Web site, or Squidoo lens with HTML numeric codes

1 - I can do better 2 - Jury's out 3 - Pretty darn good 4 - Splendiferous 5 - Awesometastic by 99 people | Log in to rate

Ranked #390 in Tech & Geek, #8,767 overall | Donates to Acumen Fund

A way to display symbols on your Web site, blog, or Squidoo lens

Ever wanted some HTML code to create special symbols on your site—like a heart symbol, euro or copyright character? "What you see is what you get" (WYSIWYG, pronounced "wizzywig") interfaces like Squidoo's are great, but sometimes you want to get a little outside the box.  

The best way to do this is with HTML numeric codes.  They look a little scary at first, but they're very easy to use, and they look right on virtually any browser.

(Some of the easier-to-remember codes don't work on all browsers, so your Icelandic Firefox readers might get junk characters.  And we wouldn't want that to happen.)

What are HTML numeric codes? 

It sounds complicated

These are just strings of characters and numbers that stand for a particular character. All you do is replace the character with the string. This has to be in the HTML code of your web site. The "edit" mode on Squidoo modules handles this for you, but if you're building a web site, be sure you're working on the code. You'll be able to tell because HTML code has lots of < angle brackets > and < weird > funny tags < /weird >.

Get to the codes already! 

I can't wait to start adding special characters to my lens!

These are the codes that have come up for me—if you want to add your own favorites, drop a post in the guestbook and I'll try to look them up for you.

Bullet (•) &#8226;
Cent sign (¢) &#162;
Copyright sign (©) &#169;
Degree sign (°) &#176;
Em dash (—) &#8212;
Euro symbol (€) &#8364;
Heart symbol (♥) &#9829;
Inverted exclamation (¡) &#161;
Inverted question (¿) &#191;
Non-breaking space &#160;
Pi (π) &#960;
Pound sterling (£) &#163;
Registered trademark sign (®) &#174;
Section sign (§) &#167;
Trademark sign (™) &#153;
Umlout o (ö) &#246;
Yen symbol (¥) &#165;

Yes, they work on Twitter! 

♥ (type &#9829;) is just one of the many very useful shortcuts you can use on Twitter. When you've got 140 characters, every one counts!

(Follow me on twitter at twitter.com/soniasimone)

Are you making boneheaded mistakes with your Web design? 

A must-have reference on how to make Web sites that work

If you're building or maintaining a Web site, you need this book! In very simple, easy-to-understand language, it walks you through everything you have to consider about making your site highly user-friendly.

Make sure your users are doing what you want them to do! This is a usability "bible" for experienced developers, and it's also very readable and understandable for the non-technical user.
Don't Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition

Don't Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition

by: Steve Krug

Amazon Price: $26.40 (as of 07/10/2009) Buy Now

How about a heart symbol? 

It took me some digging, but I finally found a numeric code for the heart symbol. &#9829; will display ♥♥♥s to your ♥'s content.

The heart symbol isn't universally supported by browsers, so let me know in the guestbook if you see hinky characters!

Another cool option is to find a free or cheap heart .jpg and link to it as an image. The lens above on HTML and Squidoo lenses will help you if you don't know how to do that. An image link will probably be more robust and work better across different browsers than the code will.

(Don't link to an image that isn't free and/or that you don't own, that's lame and bad manners.)

Try istockphoto for an amazing collection of cheap and good photos and illustrations that will work beautifully just for this purpose. (That's where I found the oh-so-cool blue numbers photo that I'm using in this lens.)

Strict XHTML or Flash & JavaScript? 

Which is best?

Some folks are XHTML/CSS purists, others like to spice things up with the latest technology and design tools. How about you?

Strict XHTML/CSS or Flash/Java/Latest Nifty Thing?

Loading Fetching blurbs now... please stand by

Strict XHTML/CSS

hatti says:

♥

Posted January 26, 2009

hatti says:

♥

Posted January 26, 2009

joy says:

i cant get the heart symbol!! GRRR

Posted January 02, 2009

s says:

♥

Posted December 31, 2008

boo-boo says:

♥

Posted December 18, 2008

john says:

&hearts;

Posted December 16, 2008

Anaaa says:

♥

Posted December 14, 2008

Flash/JavaScript/Latest Coolness

Khalid says:

Flying Monkeys, Killer Bunnies, And Those Damn Squirrels

Posted February 01, 2009

cake face says:

®

Posted December 13, 2008

marketpiper says:

Thanks alot, that came in handy!

Posted November 26, 2008

haha says:

♥

Posted November 18, 2008

me says:

&#9829

Posted November 06, 2008

rochelle says:

&hearts;

Posted October 30, 2008

buddy says:

&#9829

Posted October 13, 2008

 
1 of 16 pages
 

The fastest, cheapest way to create a great-looking site 

With just a tiny bit of head-scratching you can learn the basics of HTML and CSS, and then you can use one of the great free templates available at Open Source Web Design (www.oswd.org). You don't have to pay anything at all for them--just link back to the designer.

Buy an inexpensive image at www.istockphoto.com, crop it to fit, grab some cheap hosting at godaddy and you're up and running. Maybe $50 if you have to buy a couple of how-to books. I set up my copywriting business site using the "Andreas01" template from OSWD. It was easy to set up and customize, and I think it's a great, sharp simple design.

Find out how your Web site is doing 

Would you like to know how many people are visiting your Web site, what they're looking at, how long they stay, and what they click out on? Google Analytics is completely free and will tell you all that and more.

I found this book very helpful to get the most out of Google Analytics. It walks you through everything from how to install GA to how to decipher the results. It's written in plain English and doesn't assume any supergeek technical ability.
Google Analytics 2.0

Google Analytics 2.0

by: Jerri Ledford, Mary E. Tyler

Amazon Price: $19.79 (as of 07/10/2009) Buy Now

Self help 

There are many references around the Web for HTML numeric codes. The ones below are fairly user-friendly.

www.foxinternet.co.uk/keyboard.html

www.december.com/html/spec.codes.html

What if the code doesn't work on my site? 

Remember that you need to use the HTML mode to enter these codes.

Some misguided sites will convert your nice, clean numeric codes to versions that aren't as widely supported. (Don't ask me why, I think it's nuts.) For example, when I was on Typepad, they did this on my blog, which broke my RSS feed every once in awhile. Nonbreaking spaces are especially bad culprits.

Look around for a "plain text" mode. That sometimes means "OK we trust you, we'll actually use the code you enter."

Some systems will just get in your way and keep you from doing things right. Send 'em a message on their bug report software, and tell them you want the right to code with HTML numeric codes, as nature intended!

If you found this useful, I invite you to check out my site and other lenses! 

The Remarkable Communication blog
Thoughts on permission marketing, email marketing, weird definitions of success, and creating stronger communication with your customers.

Fast, cheap, and out of control: 21st-century techniques to grow your business
A look at how to use the Web, blogs, email newsletters, and other Internet tools to promote your small business.

Marketing dictionary
I'll add more entries from time to time.

Benefits, not features
Call to action
Split Test

Suggestions! Requests! Corrections! 

If you know anything at all about technology, it will be painfully obvious that I'm a dilettante at best. I welcome all suggestions and corrections here!

Lensmaster

Rakesh Clark wrote

Thanks for providing this information on your blog, it is very much helpful to me. Waiting for your new arrivals.

SEO Company In India

Reply Posted February 02, 2009

Lensmaster

GrowWear wrote...

Needed the code for the trademark symbol and there you were. Thank you!

ReplyPosted January 25, 2009

Lensmaster

Aika wrote...

yeah, this is cool! it'll add spice on my lenses.

ReplyPosted December 16, 2008

Lensmaster

bitteliten wrote

witch sign is the first one in your codes? I thought all of them started with & - but that doesnt seem to be it...

Reply Posted December 04, 2008

Lensmaster

seedplanter wrote...

I wish I'd found this lens sooner. It's full of good stuff!
Thanks for the work you put into this. I'm lensrolling it to my two Squidoo-related lenses. Also going to link to it in my Discovery module on a new lens I'm currently working on. Nice job, Sonia.

ReplyPosted December 03, 2008

Lensmaster

d wrote

♥

Reply Posted November 21, 2008

Lensmaster

CCB wrote...

Thanks for sharing the codes.
CCB

ReplyPosted October 19, 2008

Lensmaster

g_e_ wrote...

great lens! i've found a lens too on how to add a bullet,it says you press alt 0149. it showed a bullet but it does not work when you try to save and publish your lens. how about a smiley? will that work on twitter too?

ReplyPosted October 13, 2008

Lensmaster

MusicMadness wrote...

Thanks very much for another trick for my little lens bag of tricks. Anything to make my lens stand out is great. 5*

ReplyPosted September 18, 2008

 
Next Page
1 of 16 pages

by sonia_simone

Writer, marketer, tinkerer, parent, human being, meditator, gardener, obsessive, bookworm, smartypants, idiot, knitter, bleeding heart, analyst, and w...

(more)

Related Topics

sonia_simone Recommends...

Favorited By

Create a Lens!