Empty rectanglar box is displayed instead of the rupee symbol in HTML

Question

I am using this code to display rupee symbol.

&#x20B9 ; // semicolon is just after 9.

for example

<td> &#x20B9;{{ od.quantity * od.product_sell_price | currency:""}}</td>

But it is displaying empty box instead of rupee symbol in some machines/browsers. For me it is displaying proper but some people shared me screen shot where it is a kind of empty rectangle box.

Can anyone help me why is that different behavior and how to fix it?

Answer 1

Some of the browsers/OS don't support rupee symbol ₹ yet.

Fixes:

1. You may use a CSS font which supports it to use the symbol.

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

2. Use similar symbol: <del>&#2352;</del> => र

3. Try ₹ => ₹

4. Use an image(bad solution but works): <img src="https://i.stack.imgur.com/nGbfO.png" width="8" height="10"> =>

Answer 2

You can do it with Intl.NumberFormat.

var number = 400000;

console.log(new Intl.NumberFormat('en-IN', {
  style: 'currency',
  currency: 'INR'
}).format(number));

Or using Icons8 for Indian Rupee (INR).

CDN

<!-- Image size: 24px -->
<img src="https://img.icons8.com/material/24/000000/rupee.png">

Base64

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADbSURBVEhL3dUxCwFxGMfxK0UGg4EsNpPZaDZaDcpoMXo13oDZC2CSGGSyMpgsJlJK+P6uri6d+rv/Y/Gtz3BX93/quZPgb3um5FzSwy5SV0IHe+igFTIwT4N20JC+bvyiHjRgFl6lLNrpt5xLetiFSdGKFuGVcfGXPNANq8qIf6YbZJG6aKdJdHgFXr0fesESWksO3ulHdIcOH8NrHZ9q4woNmaIA85o4QUPW8N59UnUcoCH6RGswr4otNOSIBswrYg4NOaMF8/KYQENu6MI8/dGMoCEPDPG3BcELTYVtU4m89QEAAAAASUVORK5CYII=">