Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
An empty box is displayed instead of the rupee symbol in HTML
When displaying the Indian rupee symbol (?) in HTML, you might encounter an empty box instead of the symbol due to browser compatibility or font issues. Here are reliable solutions to ensure proper rupee symbol display.
The Problem
The rupee symbol using HTML entity ₹ may not display correctly in all browsers or devices:
₹
This can appear as an empty box ? if the browser or font doesn't support the Unicode character.
Using Font Awesome Icons (Recommended)
Font Awesome provides cross-browser compatible rupee icons:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
<p>Price: <i class="fa fa-inr"></i> 500</p>
<p>Total: <i class="fa fa-rupee"></i> 1200</p>
</body>
</html>
HTML Entity Methods
Alternative HTML entities for the rupee symbol:
<!DOCTYPE html>
<html>
<body>
<p>Hexadecimal: ₹ 100</p>
<p>Decimal: ₹ 200</p>
<p>Named entity: &inr; 300</p>
</body>
</html>
Using Web Fonts
Google Fonts or custom web fonts ensure consistent symbol display:
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap" rel="stylesheet">
<style>
.rupee { font-family: 'Roboto', sans-serif; }
</style>
</head>
<body>
<p class="rupee">Amount: ? 500</p>
</body>
</html>
Comparison
| Method | Browser Support | Easy Implementation |
|---|---|---|
| Font Awesome | Excellent | Yes |
| HTML Entities | Good (font dependent) | Yes |
| Web Fonts | Excellent | Moderate |
Conclusion
Font Awesome icons provide the most reliable solution for displaying rupee symbols. For lightweight solutions, use HTML entities with proper font fallbacks to ensure cross-browser compatibility.
293 Views
