Displayin Unicode chars in html

Unicode looks like this
©

and thats all you need to use.
What character are you wanting?

There are multiple ways to do this.  First I think you re talking about @fontface.

<style>
@font-face { font-family: somefont; src: url('somefont.otf'); } 
@font-face { font-family: otherfont; src: url('otherfont.ttf'); } 

.somefont { font-family: somefont, sans-serif; }


</style>
<P class="somefont">i</p>
I am using a special font and you can see the circle <span class="somefont">i</span>

Select allOpen in new window

The problem with the above is you need to load the font to the server and also have the rights to do so.  If it is open source or you paid for it you are good.

I think a better option would be to use html entities or ascii characters.

http://www.unicode.org/charts/ and you can use your php code to call the entity.

<span style="font-family:wingdings 2">i</span>

Won't work if they don't have the font though....

Using @fontface you just need to look at compatibility http://webfonts.info/browser-support-overview and load multiple versions.  

The wingding thing is pc and mac have dingbats.  

The real issue is you could be loading another 150k file just for one small item.  That's why I think using the ascii character might be bet best.

Or even easier just use a sprite and move it as needed since that image/s is not in ASCII

Just checked and wingdings are copyright Microsoft so you cannot use them if it involves uploading them to the server which even as image would be included.

The first reply. You stated that this is the code for Unicode:

&#x00A9;

I assume that "00A9" is the decimal value?

Then all I would have to do is change this:

<p style="margin-bottom: 0px;">
          <font face="Windings 2">i</font>
</p>

To this:

<p style="margin-bottom: 0px;">
          &#x9312;
</p>

Just try my second solution, but be aware this will only work for Windows pc's as they are the only ones to have wingdings has padas has pointed out.

Okay.  All i want to do is display a number with a circle around it.  I don't want to be bothered with what operating system it's going to.

What's the easiest way to do this?

Use the attached image and just adjust the position for each number
e.g.

<style>
.num {
width:20px;
height:20px;
}
.num0 {
background:url('numbers.jpg') 0 0;
}
.num1 {
background:url('numbers.jpg') 0 -21px;
}
.num2 {
background:url('numbers.jpg') 0 -41px;
}
.num3 {
background:url('numbers.jpg') 0 -62px;
}
.num4 {
background:url('numbers.jpg') 0 -82px;
}
.num5 {
background:url('numbers.jpg') 0 -103px;
}
.num6 {
background:url('numbers.jpg') 0 -123px;
}
.num7 {
background:url('numbers.jpg') 0 -144px;
}
.num8 {
background:url('numbers.jpg') 0 -164px;
}
.num9 {
background:url('numbers.jpg') 0 -185px;
}
</style>
<p class="num num0"></p>
<p class="num num1"></p>
<p class="num num2"></p>
<p class="num num3"></p>
<p class="num num4"></p>
<p class="num num5"></p>
<p class="num num6"></p>
<p class="num num7"></p>
<p class="num num8"></p>
<p class="num num9"></p>
numbers.jpg

Very easy.... here is a list of ascii characters.  http://nwmtwd.com/misc_character_sets.html

You could use &#9461; for 1 and &#9462; for 2 etc..

Here it is live action...

They look really bad in IE and Chrome, Firefox look fine tho

Or even simpler with attached image
<style>
.num {
width:20px;
height:21px;
text-align:center;
font-weight:bold;

font-size:15px
}
.num {
background:url('number.jpg');
}

</style>
<p class="num">0</p>
<p class="num">1</p>
<p class="num">2</p>
<p class="num">3</p>
<p class="num">4</p>
<p class="num">5</p>
<p class="num">6</p>
<p class="num">7</p>
<p class="num">8</p>
<p class="num">9</p>
number.jpg