Devesh Agrawal Devesh Agrawal - 6 months ago 42
AngularJS Question

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

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

Some of the browsers/OS don't support rupee symbol &#x20B9; 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 &#8377; => ₹

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