How To Add Indian Rupee symbol in HTML on Blogs and Websites

Indian Rupee symbol has got the Unicode as U+20B9 and the character is expected to be available on some keyboards in next 2 or 3 months. But if you need to write the Indian Rupee symbol on your website thru HTML, you don’t need to use image as you can write that. Many bloggers are using Indian Rupee symbol image to write the symbol in their blog posts, but there is a way to write that in such a way that the symbol will appear as text.

There are few web resources to add that symbol in HTML and out of which, an option is to add a JavaScript in the footer area of your blog template which will convert the text “Rs.” on your site to “Indian Rupee Symbol”. Here is the script,

<script src="http://cdn.webrupee.com/js" type="text/javascript"></script>

indian rupee symbolJust paste this script in the footer area of your HTML before body close. WordPress users can paste this script in footer.php file of their theme template.

Other way is to include the below mentioned stylesheet in the HEAD section of your HTML file or template (header.php) and then you can use a pre-defined SPAN class to write Rs. text which will be converted to Indian Rupee Symbol. Here is the Stylesheet and SPAN class code.
Stylesheet:

<link rel="stylesheet" type="text/css" href="http://cdn.webrupee.com/font">

Now use the below mentioned code to type Indian Rupee symbol,

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

Once the popular font families will be updated to Unicode 6.0.0, then you will be able to type Indian Rupee Symbol by typing &#x20b9; in HTML editor.

Sanjeev Mishra is a professional blogger and an Internet Marketing Consultant based in India. He has built the Internet Techies to provide you updates in technology and web application area.
  • thank you very much for providing this trick.