We are all hooked onto this social networking phenomenon, especially with Facebook and I guess you are all wondering how some of your friends are posting icons along with their comments.

The answer is easy: they use HTML symbol entities.

Some characters (e.g. the less than and greater than signs) are reserved for HTML markup. In order to display these characters as text, you must enter the HTML entities in the source code.

For example, to display the less than sign (<), you need to enter < (entity name) or < (entity number).

Among the entity list, there are quite a lot of symbol entities that we can use in layout design. For examples: → ♥ • “ ⊕.

Continue reading this post to find more surprises.

The Advantages of Using Entities Rather Than Images

• It loads fast because it is text base.
• Scalable according to font size.
• Easy to change color and sizing.

Apostrophe & Quotation Marks

Most common typography mistakes found on the internet are probably the mis-uses of apostrophe and quotation marks. We often misuse the prime symbol ( ‘ ) as the apostrophe ( ’ ) and the double prime ( " ) as the quotation marks ( “ ” ).

To correct this, you can use the right single quote entity (’) as the apostrophe. Use the left double quote (“) and right double quote (”) for the quotation marks.

Arrows

I particularly find the arrow symbols useful because they can be used as direction arrows or breadcrumb separators.

Link Separators

My favourite entities for separating links are bullet • ( • ) and dot operators ⋅ ( ⋅ ).

Trademark, Copyright, Degree, and Currency

The other commonly used entities are probably the trademark, copyright, degree, and currency symbols.

Trademark ™ | © Copyright | Registered Trademark ®
Currency: ¢ Cent | £ Pound | ¥ Yen | € Euro

Symbols For Web Design

Here some entities that you can perhaps use for design layout:

⊕ ⊗ ∞ ♥

Miscellaneous Symbols

Here are some miscellaneous symbols that you will most likely never going to use (but they are cool):

♠ ♣ ♥ ♦

So there you have it, all of the HTML symbol entities I can think of and with this post I hope to help people put new and exciting icons across the web.