Current status of the Ning Platform is always available on the Ning Status Blog.

FORUM

NC for Hire

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:info@yourdomain.com">
info@yourdomain.com
</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!

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Email me when people reply –

Replies

This reply was deleted.
 

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

Scott Bishop replied to Scott Bishop's discussion
How to Change the Navigation Font that is Not Listed
"Thanks Bizz, but it still didn't do anything. "
2 hours ago
Bizz replied to Scott Bishop's discussion
How to Change the Navigation Font that is Not Listed
"It looks like you have a semi colun before the important which may stop it working, here in bold
na…"
3 hours ago
Scott Bishop replied to Scott Bishop's discussion
How to Change the Navigation Font that is Not Listed
"Thanks! ...but it's not working. 
Perhaps I'm putting your Design Studio code in the wrong spot. I…"
4 hours ago
⚡JFarrow⌁ replied to Scott Bishop's discussion
How to Change the Navigation Font that is Not Listed
"Yes.. go to the page for the font
choose your font weights
add this to the top of Custom Code
<link…"
6 hours ago
Somos Más, CAROL FOSTER, Hyacinthe Romain and 1 more joined Ning Creators Social Network
9 hours ago
Luca Boscardelli, James Pearson, Allen Williams and 2 more joined Ning Creators Social Network
yesterday
Ana Massien updated their profile photo
Saturday
Ana Massien updated their profile
Saturday
This Is bully replied to Anastasia_Ning_Support's discussion
Why should I migrate?
"32000 member You can asked for $1 in donation and keep it running."
Saturday
Fashion replied to Anastasia_Ning_Support's discussion
Why should I migrate?
"My site has a bit over 32,000 members. I don't want to close the site, but might have to if prices…"
Friday
Dax Carlisle and Julius Manninen joined Ning Creators Social Network
Friday
Scott Bishop posted a discussion
Does anyone know how to change the font for the navbar to a font that is not listed for Ning 2.0? I…
Friday
More…

Meanwhile, you can check our social media channels