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
Selected Reading
How to display rupee symbol in HTML
The Indian rupee symbol (?) can be displayed in HTML using several methods. Here are the most reliable approaches to ensure proper display across different browsers.
Using HTML Entity Code
The most straightforward method is using the HTML entity code for the rupee symbol:
<!DOCTYPE html>
<html>
<head>
<title>Rupee Symbol Example</title>
</head>
<body>
<p>Price: ₹500</p>
<p>Amount: ₹1000</p>
</body>
</html>
Price: ?500 Amount: ?1000
Using Font Awesome Icons
Font Awesome provides a reliable cross-browser solution with the rupee icon:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<p>Price: <i class="fa fa-rupee-sign"></i>500</p>
<p>Legacy: <i class="fa fa-inr"></i>1000</p>
</body>
</html>
Price: ?500 Legacy: ?1000
Direct Unicode Character
Modern browsers support the direct unicode character:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>Direct symbol: ?2500</p>
<h2>Product costs ?899 only</h2>
</body>
</html>
Direct symbol: ?2500 Product costs ?899 only
Comparison of Methods
| Method | Code | Browser Support | Best For |
|---|---|---|---|
| HTML Entity (Decimal) | ₹ |
Excellent | Simple text display |
| HTML Entity (Hex) | ₹ |
Excellent | Alternative encoding |
| Font Awesome | <i class="fa fa-rupee-sign"> |
Universal | Styled applications |
| Direct Unicode | ? |
Modern browsers | UTF-8 encoded pages |
Key Points
- Always include
<meta charset="UTF-8">when using direct unicode characters - HTML entity codes work in all browsers without additional dependencies
- Font Awesome requires external CSS but offers consistent styling
- Test your chosen method across target browsers
Conclusion
For maximum compatibility, use HTML entity codes like ₹. For styled applications with consistent iconography, Font Awesome provides reliable cross-browser support.
Updated on: 2026-03-15T23:18:59+05:30
2K+ Views
Advertisements