More Unicode Awesomeness with CSS

[JFarrow]

A few weeks back I showed you how to add a pure HTML sidebar quicklinks navigation using Unicode.  Here for another short installment, I'll show you how to add symbols beside different types of links using Unicode and CSS

 

We Create Unicode Icons By Using CSS. You always see Icons beside certain types of links like:

• Message or Letter Icon.
• Arrow Icon.
• Telephone Icon.
• Quotation Icon.
• Alert Icon.

These Icons Can be created automagically by using CSS.
Here is The CSS Code.

<style type="text/css">
a[href^="mailto:"]:before { content: "2709"; }
.phone:before { content: "2706"; }
.important:before { content: "27BD"; }
blockquote:before { content: "275D"; }
blockquote:after { content: "275E"; }
.alert:before { content: "26A0"; }
</style>

And here is some example HTML

<p>
<a href="mailto:[e-mail]">
[e-mail]
</a>
</p>

<p class="phone">
444-444-444
</p>

<p class="important">
REMEMBER: Don't get drunk and code.
</p>

<blockquote>
If it ain't broke, fix it until it is.
</blockquote>

Unicode isn't the answer to everything, but it is lighter than an image, so give it a try!

[Farah]

thanks

bojaper.com

[Armani Rouse]

i implemented this on my site, great tip! but for some reason i had to add the code to an ad box above the header bcuz placing it in the custom code box made it appear at the bottom of thde home page, also when I browse the site from different browsers the pictures dissappear and only display numbers, any help? and making them a bit bigger would be cool :)