4 Ways To Display Indian Rupee Symbol In HTML(₹) Pages

Steps to display Indian rupee symbol in HTML pages (₹)

1. Use rupee symbol ASCII code 8377
2. Or Use rupee symbol Unicode character code ₹
3. Or Use CSS content values
4. Or Use font awesome icons

On this page

Before that let’s go to the history of  Indian Currency Rupee Symbol(₹).

The Union Cabinet approved Indian currency rupee symbol on 15 July 2010. And this Rupee symbol designed by Uday Kumar, Assistant Professor IIT Gauhathi.

It’s a combination of Devanagari Letter “र”(ra) and Latin Capital ‘R’ without vertical bar.(₹)

Display Rupee symbol in HTML using ASCII Code: #

To display Rupee Symbol in HTML Use ASCII code ₹ as shown below.

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

₹ #

Display Rupee symbol in HTML using Unicode character Code: #

One more method is by using the Unicode Character of Indian Rupee Symbol.

On August 10th, 2010 Unicode Technical Committee accepted the Code position as U+20B9 .

To display rupee sign in HTML pages, use the Unicode ₹  as shown below

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

₹ #

But the problem with this method is Unicode will only be converted on the systems with Unicode version 6.0. The user with the lower version of the Unicode system may not able to see the Rupee symbol.

Display Rupee symbol in HTML using CSS content values: #

To display the rupee symbol in HTML using CSS content values. Use CSS pseudo-elements ::before or ::after with CSS content value as “\20B9”

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

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

₹ #

Display Rupee symbol in HTML using font awesome icons: #

If you are using font awesome icons in your project. You can use font awesome icon code to display Indian rupee sign in HTML.

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

<i class="fas fa-rupee-sign"></i>

To use font awesome icons and for the complete 1534 free font awesome icons list go through this article

1534 font awesome icons list,usage,css content values cheatsheet

And to display rupee symbol in Angular applications go through the below article

Angular Currency Pipe & Formatting Currency In Angular

And one more method is to use some third-party Web API like Web Rupee. But I will not prefer to use this method as we have standard codes to display the rupee symbol. It’s like for displaying ‘&’ in our web pages using some external library.

The above 4 ways are widely accepted and used by many people around the world to display the Indian Rupee symbol(₹) in HTML websites.