CODEWITHSUNDEEP
htmlcssfont-face
Jaison
Jaison

Reputation: 813

Rupee symbol in HTML

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!!

Upvotes: 1

Views: 21214

Answers (7)

Shivam Malan
Shivam Malan

Reputation: 9

For HTML

Use &#8377; 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;
}

Upvotes: 0

Ashu
Ashu

Reputation: 709

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

Upvotes: 0

Rajnikanth
Rajnikanth

Reputation: 2795

Try this one:

<del>&#2352;</del>

Upvotes: 0

vivex
vivex

Reputation: 2515

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.

Upvotes: 0

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57095

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('https://i.sstatic.net/vJZ9m.png');
    display:block; 
    background-repeat: no-repeat;
}

Rupee Image

Ruppe Image

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

Upvotes: 2

srb
srb

Reputation: 173

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

Upvotes: 13

Simon
Simon

Reputation: 661

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

Upvotes: 0

Related Questions