-
Notifications
You must be signed in to change notification settings - Fork 4
Emojis in Web Components
When integrating WebComponent with emojis, you might encounter an issue where emojis or icons do not display correctly.
This issue is typically caused by a character encoding problem. The default character set for HTML documents may not support the correct display of emojis and special icons, leading to rendering issues.
To ensure that emojis and icons render correctly, you need to explicitly set the character encoding to UTF-8. This can be done by including a <meta charset="UTF-8"> tag in the <head> section of your HTML document.
Here's a simple HTML example that demonstrates how to correctly integrate the day-trip-map-widget with the proper character encoding:
Incorrect Integration (Emojis Not Displaying):
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="https://cdn.webcomponents.opendatahub.com/dist/137e4aa4-af69-4085-90be-b58299879cb4/day_trip_map_widget.min.js"></script>
</head>
<body>
<day-trip-map-widget lang-and-locale="en-US" log-info="false"></day-trip-map-widget>
</body>
</html>Correct Integration (Emojis Displaying Correctly):
Copy code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<script src="https://cdn.webcomponents.opendatahub.com/dist/137e4aa4-af69-4085-90be-b58299879cb4/day_trip_map_widget.min.js"></script>
</head>
<body>
<day-trip-map-widget lang-and-locale="en-US" log-info="false"></day-trip-map-widget>
</body>
</html>This wiki contains additional information about the Open Data Hub alongside the Open Data Hub - Official Documentation 🔗 .