I have few doubts regarding CSS while i implimenting rupee symbol开发者_开发知识库 in my asp.net webpage:

Below is my code :

HTML:

<div id="container"><span>Rs.</span> 5000</div>

CSS:

@font-face{
    font-family:‘WebRupee’;
    src:url(‘WebRupee.V2.0.eot’);
    src:local(‘WebRupee’), url(‘WebRupee.V2.0.ttf’)format(‘truetype’), url(‘WebRupee.V2.0.woff’) format(‘woff’), url(‘WebRupee.V2.0.svg’) format(‘svg’);
    font-weight:normal;
    font-style:normal;
}
.WebRupee{
    font-family:’WebRupee’;
}
html > body.WebRupee {
    margin-right:2px;
}
html > body.WebRupee {
    *margin-right:0;
}
#container {
    width:500px;
    margin:50pxauto;
}

I want to get the rupee symbol in asp.net webpage..is there anything missing here?

This is the url which i referenced:

Click here

Do i need to install anything in my system..?

Will it available for all users where my webiste used throught the world without installing anything in users(their) system?

Can I append the already existing CSS file(which is used for other div tags in my same html file where i using rupee symbol) with the above code? in that case do i need to change the name in css and id in html #container to something else as i already have #container there?

I didnt see the above part over #container in CSS

:ie

@font-face{font-family:‘WebRupee’;src:url(‘WebRupee.V2.0.eot’);src:local(‘WebRupee’), url(‘WebRupee.V2.0.ttf’)format(‘truetype’),url(‘WebRupee.V2.0.woff’)format(‘woff’),
url(‘WebRupee.V2.0.svg’)format(‘svg’);font-weight:normal;font-style:normal;}
.WebRupee{font-family:’WebRupee’;}
html>body.WebRupee{margin-right:2px;}
html>body.WebRupee{*margin-right:0;}

not revefenced for DIV in html ..is it like that or do i need to make it inside a class

should it be something like this ..

.rupee
{

@font-face{font-family:‘WebRupee’;src:url(‘WebRupee.V2.0.eot’);src:local(‘WebRupee’), url(‘WebRupee.V2.0.ttf’)format(‘truetype’),url(‘WebRupee.V2.0.woff’)format(‘woff’),
url(‘WebRupee.V2.0.svg’)format(‘svg’);font-weight:normal;font-style:normal;}
.WebRupee{font-family:’WebRupee’;}
html>body.WebRupee{margin-right:2px;}
html>body.WebRupee{*margin-right:0;}
}

and i can call it like ..

<div id="container" class = "rupee"><span>Rs.</span> 5000</div>

What actually the difference between .rupee and #rupee??

Thanks for help in advance!!

---

The new Rupee symbol can be rendered directly in html like this ₹. Type ₹ in your source.

---

HTML

add span with class="rupee"

<span class="rupee"></span>
Rupee Symbol in html:- <span>&#8377;</span>
<br>
Rupee :- <span>&#8360;</span>

CSS

.rupee{
    background-position:left;
    width: 10px; 
    height: 14px;
    background-image: url('http://i.stack.imgur.com/vJZ9m.png');
    display:block; 
    background-repeat: no-repeat;
}

Rupee Image

Working Demo http://jsfiddle.net/cse_tushar/fZpXM/

---

The main issue with your code is that you simply aren't defining the class of WebRupee on the span element.

<div id="container">

<span class="WebRupee">Rs.</span> 5000

</div>

In response to other parts of the question...

the id container isn't required for the class, all it is setting is the width and margin

What actually the difference between .rupee and #rupee??

.rupee is a class and #rupee is an ID

---

you can simply use webrupee`s API (http://webrupee.com/)

just include this

and then use Rs. 200

or you can use this in html ₹ this code will print rupee sign.

---

Try this one:

<del>&#2352;</del>

---

Simply Use &#x20B9(₹) to show the Rupee Symbol. or Inspect the text i have written here.

---

For HTML

Use ₹ anywhere in HTML document.

But if you want to use it through CSS:

then use "\20B9" in the content member such as

.rupee::before{
content:"\20B9";
font-size: 2rem;
}