I have this website built with Angular and Bootstrap. I am loading symbols from API. API has rupee symbol "₹". When its getting displayed on browser its displayed as something else entirely.

I tried to inspected from Developer tools it's again correct "₹" symbol.

<strong>₹</strong>

When displayed it's something different. Can't figure out why. Any idea?

I have this website built with Angular and Bootstrap. I am loading symbols from API. API has rupee symbol "₹". When its getting displayed on browser its displayed as something else entirely.

I tried to inspected from Developer tools it's again correct "₹" symbol.

<strong>₹</strong>

When displayed it's something different. Can't figure out why. Any idea?

• javascript
• html
• css

Share Improve this question Follow edited Jan 16, 2017 at 5:00 user663031 asked Jan 16, 2017 at 4:56 ShreejibawaShreejibawa 1,86811 gold badge2828 silver badges3838 bronze badges 5

• 1 Can you please post the API details? – David R Commented Jan 16, 2017 at 4:58
• What font are you displaying the symbol in? (sometimes, the glyphs can get messed up if you're using a font converted to web or a non-websafe font face) – haxxxton Commented Jan 16, 2017 at 5:00
• Make sure the JSON is being served as UTF-8. – user663031 Commented Jan 16, 2017 at 5:00
• Also, FYI thats a Russian Ruble character: fileformat.info/info/unicode/char/20bd/index.htm – haxxxton Commented Jan 16, 2017 at 5:03
• json should be served as UTF-8 – jitendra varshney Commented Jan 16, 2017 at 5:10

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 5

If you have used web-fonts then check if those fonts support symbol. You can change font for that particular tag. My suggestion would be adding a class and use font-family:Arial; or make sure you use fonts that supports whatever symbol you use.

<strong class="currency">₹</strong>

You can use this ₹ HTML entity to display the Rupee icon (₹).

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

Hope this helps!

Use ₹ It will work.

<strong>&#8377;</strong>

You can use Html entity

<label>&#8377; </label>

Make sure you specified your charset as "UTF-8" in your index.html as follows:

<meta charset="UTF-8">