There was so much wrong with the code the way you wrote it that I ended up rewriting it from scratch.
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" rel="stylesheet"/>
<style>
#fontAwesomeContainer {
font-size: 24px;
}
</style>
</head>
<body>
<input type="text" id="iconInput" placeholder="Enter Unicode value" onchange="showFont()">
<div id="fontAwesomeContainer" class="fa"></div>
</body>
<script>
const iconContainer = document.getElementById('fontAwesomeContainer');
function showFont() {
const unicodeValue = iconInput.value;
if (unicodeValue) {
const iconHtml = `&#x${unicodeValue};`;
iconContainer.innerHTML = iconHtml;
} else {
iconContainer.innerHTML = '';
}
}
</script>
</html>The key to getting the font to display was to set a particular class on the container that you want to display the font in. Specifically, fontAwesome expects a class of fa to be present. That's all you need to do to display the font.
Submit an article or tip