Login/Register
Displaying the Indian currency symbol on a website
Asked Answered
Solved htmlcurrencysymbols
D

18

113

This symbol for the rupee, the currency of India, was approved by the Union Cabinet on 15 July 2010. How can I display it on a website?

Indian currency symbol

Drawtube answered 30/8, 2010 at 5:32 Comment(4)
Interesting. Note, U+20B9 is an unassigned code point in Unicode 5.2 - it has been accepted (as the text indicates) for inclusion into Unicode hopefully in the near future. Cool looking symbol. (Unicode accepted list: unicode.org/alloc/Pipeline.html) – Dispersant
Check this: Comprehensive Answer – Postern
Possible duplicate of Empty rectanglar box is displayed instead of the rupee symbol in HTML – Helm
w3schools.com/charsets/tryit.asp?filename=8377 – Boredom
D
21

WebRupee is a web API for the Indian currency symbol. It provides a simple, cross browser method for using the Rrupee symbol on your webpage, blog or anywhere on the web.

Here is a method for printing the Indian currency symbol:

<html>
<head>
    <link rel="stylesheet" type="text/css" href="http://cdn.webrupee.com/font">
    <script src=http://cdn.webrupee.com/js type=”text/javascript”></script>
</head>
<body>
    Rupee Symbol: <span class="WebRupee">Rs.</span> 200

This means if somebody copies text from your site and pastes it somewhere else, he will see Rs and not some other or blank character.

You can now also use the new Rupee unicode symbol — U+20B9 INDIAN RUPEE SIGN. It can be used in this manner:

<span class="WebRupee">&#x20B9;</span> 500

Just include the following script and it will update all the "Rs" / "Rs." for you:

<script src="http://cdn.webrupee.com/js" type="text/javascript"></script>
Drawtube answered 30/8, 2010 at 11:36 Comment(6)
aren't we talking about the new Rupee symbol? – Harald
and I see this does not work on my FF 3.6 i.imgur.com/V8fnG.png go fix it. – Harald
@Ankit y u pasting image?? i have tasted it..u must be doing some mistake – Ascanius
This won't work in Mozilla because for some weird "security" reason, they made a decision to only show fonts that are from the same domain. – Coryden
Also, the CDN js from this organization gives a "stack overflow" problem in IE, as described in the accepted answer here: https://mcmap.net/q/195742/-stack-overflow-at-line-0 – Coryden
webrupee.com doesn't exist any more. – Riarial
I
100

The HTML entity for the Indian rupee sign is &#8377; (₹). Use it like you would &copy; for the copyright sign. For more, read Wikipedia's article on the rupee sign.

Industrials answered 13/12, 2011 at 20:36 Comment(2)
whats the browser support of these currency signs? does they work till IE7? – Thiosinamine
I realized that rupee symbol does not appear in several browsers. Do we need to install a ttf file or update the browser? – Blackthorn
S
43

If you are using font awesome icons, then you can use this:

To import font-awesome:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

Usage:

Current Price: <i class="fa fa-inr"></i> 400.00

will show as:

Imgur

Sputter answered 21/2, 2014 at 5:51 Comment(4)
Its best even if computer don't have font – Money
just use <i class="fa fa-inr"></i> 400.00 line its enough – Wyrick
thanks for this the currency unicode crashed in one of the 5 pc i checked it in but this was a life saver. – Gogh
the best answer till so far, also working on any bootstrap theme. – Schwinn
D
21

WebRupee is a web API for the Indian currency symbol. It provides a simple, cross browser method for using the Rrupee symbol on your webpage, blog or anywhere on the web.

Here is a method for printing the Indian currency symbol:

<html>
<head>
    <link rel="stylesheet" type="text/css" href="http://cdn.webrupee.com/font">
    <script src=http://cdn.webrupee.com/js type=”text/javascript”></script>
</head>
<body>
    Rupee Symbol: <span class="WebRupee">Rs.</span> 200

This means if somebody copies text from your site and pastes it somewhere else, he will see Rs and not some other or blank character.

You can now also use the new Rupee unicode symbol — U+20B9 INDIAN RUPEE SIGN. It can be used in this manner:

<span class="WebRupee">&#x20B9;</span> 500

Just include the following script and it will update all the "Rs" / "Rs." for you:

<script src="http://cdn.webrupee.com/js" type="text/javascript"></script>
Drawtube answered 30/8, 2010 at 11:36 Comment(6)
aren't we talking about the new Rupee symbol? – Harald
and I see this does not work on my FF 3.6 i.imgur.com/V8fnG.png go fix it. – Harald
@Ankit y u pasting image?? i have tasted it..u must be doing some mistake – Ascanius
This won't work in Mozilla because for some weird "security" reason, they made a decision to only show fonts that are from the same domain. – Coryden
Also, the CDN js from this organization gives a "stack overflow" problem in IE, as described in the accepted answer here: https://mcmap.net/q/195742/-stack-overflow-at-line-0 – Coryden
webrupee.com doesn't exist any more. – Riarial
A
18

Please try the following solution:

<span style='font-family:Arial;'>&#8377;</span>

This will be displayed as : ₹

Amphora answered 23/6, 2014 at 20:32 Comment(0)
M
17

Use this CSS:

@font-face {
    font-family: 'rupee';
    src: url('rupee_foradian-1-webfont.eot');
    src: local('☺'), url(data:font/truetype;charset=utf-8;base64,AAEAAAANAIAAAwBQRkZUTVen5G0AAADcAAAAHEdERUYAQAAEAAAA+AAAACBPUy8yRQixzQAAARgAAABgY21hcGmyCE0AAAF4AAABamdhc3D//wADAAAC5AAAAAhnbHlmmuFTtAAAAuwAABAoaGVhZPOmAG0AABMUAAAANmhoZWELSAQOAAATTAAAACRobXR4KSwAAAAAE3AAAABMbG9jYUCgSLQAABO8AAAAKG1heHAAFQP+AAAT5AAAACBuYW1lWObwcQAAFAQAAAIDcG9zdCuGzNQAABYIAAAAuAAAAAEAAAAAxtQumQAAAADIadrpAAAAAMhp2uoAAQAAAA4AAAAYAAAAAAACAAEAAQASAAEABAAAAAIAAAADAigBkAAFAAgFmgUzAAABGwWaBTMAAAPRAGYCEgAAAgAFAAAAAAAAAIAAAKdQAABKAAAAAAAAAABITCAgAEAAICBfBZr+ZgDNBrQBoiAAARFBAAAAAAAFnAAAACAAAQAAAAMAAAADAAAAHAABAAAAAABkAAMAAQAAABwABABIAAAADgAIAAIABgAgAFIAoCAKIC8gX///AAAAIABSAKAgACAvIF/////j/7L/ZeAG3+LfswABAAAAAAAAAAAAAAAAAAAAAAEGAAABAAAAAAAAAAECAAAAAgAAAAAAAAAAAAAAAAAAAAEAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB//8AAgABAAAAAAO0BZwD/QAAATMVMzUhFTMVIxUjFSMVIxUjFSMVIxUjFSMVIxUjFSMVIxUjFSMVIxUjFSMVIxUjFSMVIxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUjFSMVIxUjFSMVIxUjFSMVIxUjFSMVIxUjFSMVIxUjFSMVIxUjFSMVIxUjFSMVIxUjFSMVIxUjFSMVIxUjFSMVIxUjFSMVIxUjFSMVIxUjFSMVIxUjFSMVIxUjFSMVIxUjFSMVIxUjFSMVIxUjFSMVIxUjFSMVIxUjFSMVIxUjFSMVIxUjFSMVIxUjFSMVIxUjFSMVIxUjFSMVIxUjFSMVIxUjFSMVIxUjFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVIxUjNSMVIzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUzNTM1MzUzNTM1MzUzNTM1MzUzNTM1MzUzNTM1MzUzNTM1MzUzNTM1MzUzNTM1MzUzNTM1MzUzNTM1MzUzNTM1MzUzNTM1MzUzNTM1MzUzNTM1MzUzNSE1MzUzNTM1MzUzNTM1MzUzNTM1MzUzNTM1MzUzNTM1MzUzNTM1MzUzNTM1ITUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNTM1MzUzNTM1MzUzNTM1MzUzNTM1MzUzNTM1MzUzNTM1MzUzNTM1MzUzNSECTBAYATwEBAQEBAQEBAQEBAQEBAQEBAQEBAQQ2AQEBAQEBAQEBAQEBAQEBAT0BAQEBAQEBAQEBAQEBAQEBAQEBAQECJwEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAgEBAQECAQECAQIBAgECAgECAwICAgMCAwMEAwQFBAcHBAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBIAcMAwEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEsCAcEBAMDAwICAgICAgECAQIBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAT9/AQEBAQEBAQEBAQEBAQEBAQEBAQECAGYBAQEBAQEBAQEBAQEBAgECAQIBAwICAwIEBAYFCjwBAQEBAQEBAQEBAQEBAQEBAQEBAQECAH0BZwEBAQIBAgIBAgECAQIBAgIBAgECAQIBAQEDAgECAQIBAgECAwICAwQEAQEBAgECAQICAQIBAgECAgECAQICAQEBAgQEBAMDAgIDAQICAQICAQEBAgEBAgEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBBAECAQEBAgEBAgEBAQECAQECAQEBAgEBAQIBAQIBAQEBAQIBAgEBAgEBAQIBAQECAQEBAgEBAQIBAQEBAQIBAQIBAQECAQEBAgEBAgEBAQEBAgEBAgEBAgEBAQEBAgEBAgEBAQECAQECAQEBAgEBAQECAQECAQECAQEBAQIBAQEBAgEBAQEBAQECAQEBAQIBAQECAQEBAgEBAQIBAQECAQECAQEBAgECAQEBAgEBAQIBAQIBAQEBAgEBAgEBAgEBAQECAQECAQEBAQIBAQECAQECAQEBAQIBAQIBAQEBAQIBAQECAQEBAgEBAgEBAQEBAQIBAQECAQEBAQIBAQECAQEBAQEBAgIeAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQECAQECAQICAgIDAwIHBQMCAQICAQIBAgECAQICAQIBAgEBAQEDAgIBAgEBAgEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAgECAQIBAgECAQIBAgECAQICAQEBAQAAAAAAQAAAAADtAWcA/0AAAEzFTM1IRUzFSMVIxUjFSMVIxUjFSMVIxUjFSMVIxUjFSMVIxUjFSMVIxUjFSMVIxUjFSMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVIxUjFSMVIxUjFSMVIxUjFSMVIxUjFSMVIxUjFSMVIxUjFSMVIxUjFSMVIxUjFSMVIxUjFSMVIxUjFSMVIxUjFSMVIxUjFSMVIxUjFSMVIxUjFSMVIxUjFSMVIxUjFSMVIxUjFSMVIxUjFSMVIxUjFSMVIxUjFSMVIxUjFSMVIxUjFSMVIxUjFSMVIxUjFSMVIxUjFSMVIxUjFSMVIxUjFSMVIxUjFSMVIxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFTMVMxUzFSMVIzUjFSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1MzUzNTM1MzUzNTM1MzUzNTM1MzUzNTM1MzUzNTM1MzUzNTM1MzUzNTM1MzUzNTM1MzUzNTM1MzUzNTM1MzUzNTM1MzUzNTM1MzUzNTM1MzUzNTM1MzUhNTM1MzUzNTM1MzUzNTM1MzUzNTM1MzUzNTM1MzUzNTM1MzUzNTM1MzUzNSE1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUjNSM1IzUzNTM1MzUzNTM1MzUzNTM1MzUzNTM1MzUzNTM1MzUzNTM1MzUzNTM1MzUhAkwQGAE8BAQEBAQEBAQEBAQEBAQEBAQEBAQEENgEBAQEBAQEBAQEBAQEBAQE9AQEBAQEBAQEBAQEBAQEBAQEBAQEBAicBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQIBAQEBAgEBAgECAQIBAgIBAgMCAgIDAgMDBAMEBQQHBwQBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBASAHDAMBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBLAgHBAQDAwMCAgICAgIBAgECAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQE/fwEBAQEBAQEBAQEBAQEBAQEBAQEBAgBmAQEBAQEBAQEBAQEBAQIBAgECAQMCAgMCBAQGBQo8AQEBAQEBAQEBAQEBAQEBAQEBAQEBAgB9AWcBAQECAQICAQIBAgECAQICAQIBAgECAQEBAwIBAgECAQIBAgMCAgMEBAEBAQIBAgECAgECAQIBAgIBAgECAgEBAQIEBAQDAwICAwECAgECAgEBAQIBAQIBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQQBAgEBAQIBAQIBAQEBAgEBAgEBAQIBAQECAQECAQEBAQECAQIBAQIBAQECAQEBAgEBAQIBAQECAQEBAQECAQECAQEBAgEBAQIBAQIBAQEBAQIBAQIBAQIBAQEBAQIBAQIBAQEBAgEBAgEBAQIBAQEBAgEBAgEBAgEBAQECAQEBAQIBAQEBAQEBAgEBAQECAQEBAgEBAQIBAQECAQEBAgEBAgEBAQIBAgEBAQIBAQECAQECAQEBAQIBAQIBAQIBAQEBAgEBAgEBAQECAQEBAgEBAgEBAQECAQECAQEBAQECAQEBAgEBAQIBAQIBAQEBAQECAQEBAgEBAQECAQEBAgEBAQEBAQICHgEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAgEBAgECAgICAwMCBwUDAgECAgECAQIBAgECAgECAQIBAQEBAwICAQIBAQIBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQIBAgECAQIBAgECAQIBAgECAgEBAQEAAAAAAEAAAABAACTKPMBXw889QALCAAAAAAAyGna6gAAAADIadrqAAAAAAO0BZwAAAAIAAIAAAAAAAAAAQAABrT+XgDeBZwAAAAAA7QAAQAAAAAAAAAAAAAAAAAAABMD9gAAAAAAAAKqAAAB/AAAA/YAAAH8AAACzgAABZwAAALOAAAFnAAAAd4AAAFnAAAA7wAAAO8AAACzAAABHwAAAE8AAAEfAAABZwAAAAAECgQKBAoECggUCBQIFAgUCBQIFAgUCBQIFAgUCBQIFAgUCBQIFAABAAAAEwP+AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACgB+AAEAAAAAABMABQAAAAMAAQQJAAAAaAAFAAMAAQQJAAEACgBtAAMAAQQJAAIADgB3AAMAAQQJAAMADgCFAAMAAQQJAAQAGgCTAAMAAQQJAAUAVgCtAAMAAQQJAAYACgEDAAMAAQQJABMACgENAAMAAQQJAMgAbgEXUnVwZWUAVAB5AHAAZQBmAGEAYwBlACAAqQAgACgAeQBvAHUAcgAgAGMAbwBtAHAAYQBuAHkAKQAuACAAMgAwADEAMAAuACAAQQBsAGwAIABSAGkAZwBoAHQAcwAgAFIAZQBzAGUAcgB2AGUAZABSAHUAcABlAGUAUgBlAGcAdQBsAGEAcgB3AGUAYgBmAG8AbgB0AFIAdQBwAGUAZQAgAFIAZQBnAHUAbABhAHIAVgBlAHIAcwBpAG8AbgAgADEALgAwADAAIABKAHUAbAB5ACAAMQA1ACwAIAAyADAAMQAwACwAIABpAG4AaQB0AGkAYQBsACAAcgBlAGwAZQBhAHMAZQBSAHUAcABlAGUAUgB1AHAAZQBlAFQAaABpAHMAIABmAG8AbgB0ACAAdwBhAHMAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAHQAaABlACAARgBvAG4AdAAgAFMAcQB1AGkAcgByAGUAbAAgAEcAZQBuAGUAcgBhAHQAbwByAC4AAAIAAAAAAAD/JwCWAAAAAAAAAAAAAAAAAAAAAAAAAAAAEwAAAAEAAgADADUBAgEDAQQBBQEGAQcBCAEJAQoBCwEMAQ0BDgEPB3VuaTAwQTAHdW5pMjAwMAd1bmkyMDAxB3VuaTIwMDIHdW5pMjAwMwd1bmkyMDA0B3VuaTIwMDUHdW5pMjAwNgd1bmkyMDA3B3VuaTIwMDgHdW5pMjAwOQd1bmkyMDBBB3VuaTIwMkYHdW5pMjA1Rg==)
    format('truetype');
    font-weight: normal;
    font-style: normal;
}

Declare it wherever required like this:

<span style="font-family:rupee;font-size:20px">R</span>
Marisamariscal answered 18/3, 2011 at 11:51 Comment(0)
H
11

It will take more than an year (or two) for the universal acceptance.

  1. Unicode consortium approves the char-code.
  2. Fonts are updated to include this symbol
  3. Browsers/OS are updated to include new fonts and then only it is visible on every browser on earth.

Creating custom fonts by using arbitrary code-base and (forcefully) embedding them in every web-pages is discouraged for Website. (for desktop applications it may be acceptable). Although your solution may be acceptable; I would not advice just for the sake of one symbol! Loading a font file makes web-pages slower.

By the time it is advised to use icon-sets for rupee symbol. Prepare a set of icons with sizes 12x8, 16x12, 32x32 that you can incorporate in-line using <img> tag.

E.g 5000/- (i just resized the image; it should have been re-sampled for given size for better results)

<img src="https://i.stack.imgur.com/nGbfO.png" width="8" height="10">

Note: This is what Wikipedia does. it uses png/svg file. Check the infobox here.

Harald answered 30/8, 2010 at 11:52 Comment(5)
yah.. my frnds upvoted me and I got score of 1,402! u too go and make frnds on SO instead of FB. What i described here is the best thing to do rather. There is an HTML way if you can read in my answer. Creating custom fonts by using arbitrary code-base and (forcefully) embedding them in web-pages is highly discouraged for Website. But that cannot guarantee your page will display on all web browsers; even that's an unnecessary when you can have IMG! It does not make sense to use BIG FONT FILE for just one symbol. You want scalable graphic - choose SVG! – Harald
from the revisions of this quetion, seems like you just wanted to promote your WebRupee – Harald
and now I see they even have Wiki page ( en.wikipedia.org/w/index.php?title=Webrupee&action=history ) created few days back. viral marketing. although your solution is acceptable. but i would not advice just for the sake of one symbol! prefer IMG. – Harald
@Ankit: do you really think using image is better alternative ? – Psychrometer
@Rakesh Can you list down benefits u get with a font symbol? for Machines and Humans both! For humans having image vs font is no difference. For machines having image means less computing, less bandwidth, faster webpage rendering. (this argument is valid unless the FONTS with Rs are available in every OS!) – Harald
I
10

Just type <del>&#2352;</del> in your web page.

Illuminant answered 6/6, 2011 at 6:50 Comment(0)
R
8

There are two html entity code : &#x20b9; &#8377;

Rummage answered 8/5, 2014 at 12:49 Comment(0)
E
7

You can do it with Intl.NumberFormat native API.

const number = 123456.78;

// India uses thousands/lakh/crore separators
console.log(new Intl.NumberFormat('en-IN', {
  style: 'currency',
  currency: 'INR'
}).format(number));
Exurb answered 2/1, 2019 at 6:48 Comment(1)
Thank you. This did more than I needed! – Mcguinness
K
5

use this new unicode char: &#x20b9;

Katelin answered 1/3, 2011 at 9:8 Comment(0)
B
5

best way copy the ₹ symbol and paste it.

Boony answered 2/5, 2020 at 10:36 Comment(2)
is there an html symbolic reference for it though? – Bernini
@Nelles List of Unicode Characters of Category “Currency Symbol” – Exurb
R
1

Image approach is not bad either. It hardly takes 400Bytes.
Download from here https://i.stack.imgur.com/vJZ9m.png

<span class="rupee"></span>

Well i found it better than webrupee.

For colors edit the image as below

    .rupee{
    background-position:left;
    width: 10px; 
    height: 14px;
    background-image: url('rupee.png');
    display:block; 
    background-repeat: no-repeat;
}
Retention answered 29/8, 2013 at 8:24 Comment(0)
D
0

JQUERY INR v1.2

A simple jQuery plug-in for convert Rs. to standard Indian rupee symbol through out the web page. Simple to use and simple instillation

The Indian Rupee sign is the currency sign: ₹ for the Indian Rupee, the official currency of India. Designed by D. Udaya Kumar, it was presented to the public by the Government of India on 15 July 2010,[1] following its selection through an “open” competition among Indian residents. Before its adoption, the most commonly used symbols for the rupee were Rs, Re or, if the text was in an Indian language, an appropriate abbreviation in that language. The new sign relates solely to the Indian rupee; other countries that use a rupee, such as Sri Lanka, Pakistan and Nepal, still use the generic U+20A8 ₨ rupee sign character. The design resembles both the Devanagari letter "र" (ra) and the Latin capital letter "R", with a double horizontal line at the top.

Instillation:

  1. Download the “jQueryINR_v1.2.zip” and extract.
  2. copy images (“rupee.svg, rupee.gif”) to your images folder.
  3. cope scripts folder to your project path or else copy the .js files to your script folder.
  4. Download the “jQueryINR_v1.2.zip” and extract.
  5. copy images (“rupee.svg, rupee.gif”) to your images folder.
  6. cope scripts folder to your project path or else copy the .js files to your script folder.

  7. Include jQuery min and jQuery Ui to your page first

    eg: NB: use jQuery stable version only

  8. include the “indianRupee_v1.2.js” and “indianRupee_ctrl.js” after the jQuery library eg:

  9. Use Span tag to wrap Rs through out the web it will replace with the symbol eg: Rs 1280000/-

Source:

Pay Him Rs 1280000/-

Pay Him Rs 528500/-

Pay Him Rs 1250/-

Pay Him Rs 1280000/-

Result:

   http://romy.theqtl.com/rupeePlugin/

Plug-in Options:

$("body").indianRupee({ targets:"span",// use as default we can also use [p, div, h1 , li etc...] vector:"on"//[on/off] of [true/false] NB: {vector not support in Internet Explore } });

Democracy answered 30/8, 2010 at 5:32 Comment(0)
B
0

This can be sought of a temporary solution. Unicode has accepted U+20B9 as Indian rupee symbol soon all systems will update themselves

Bluefarb answered 30/8, 2010 at 6:15 Comment(1)
I think "soon" is a bit optimistic, seeing as it's fonts that have to get updated. This will take a while. – Ramires
E
0

WebRupee API Available Here: 

<script src="http://cdn.jagansindia.in/webrupee" type="text/javascript"></script>

You can also read full details here

Electrophoresis answered 4/9, 2013 at 3:48 Comment(0)
P
0

It's possible with simple HTML entity code.

.ex{
color:green;
font-size:20px;
}
Example 1 : <span class="ex">&#x20b9;1200/-</span><br>
Example 2 : <span class="ex">&#8377;3545/-</span><br>
Example 3 : <span class="ex">&#2352;134/-</span> *Is not the exact Rupee symbol
Phylloid answered 2/1, 2019 at 7:26 Comment(0)
J
0

Just In Case. If you are binding amount to a ASP.Net label then you can display rupee sign like below

lblAmount.Text = "&#8377;"+ YourDataTable.Rows[rowindex]["AmountColumnName"];
Jankell answered 30/8, 2021 at 5:18 Comment(0)
N
0

Using ASCII in HTML

<p>Rupee sign: &#8377;</p>

Using UNICODE character in HTML

<p>Rupee sign: &#x20B9;</p>

Using CSS

<style>
.inr-sign::before{
content:"\20B9";
}
// Or use with ::after
.inr-sign::after{
content:"\20B9";
}
</style>

<span class="inr-sign"></span>

Using Font Awesome

The icon name for rupee symbol is “fa-rupee-sign”

<i class="fas fa-rupee-sign"></i>
Nonprofessional answered 19/3, 2023 at 8:23 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.