Click here to Skip to main content
15,941,278 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
i have to show a fontawesome icon on input change when i add the fontawesome unicode

i use this code to show it

HTML
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" rel="stylesheet"/>
<input  id="fontawesome" name="fontawesome" type="text" size="10"  autocomplete="on"  onchange="myFunction()" >
<style>

<p id="demo"></p>
</head>
<body>
 

 

<style>
#demo i {
color:green;
 }
</style>
 


function myFunction(){
 var x = document.getElementById("fontawesome").value;


  document.getElementById("demo").innerHTML = x;}
</script>

</body>
</html>


how can i show the fontawesome icon when i insert its unicode

the icon is shown when i insert this code for exemple
""


What I have tried:

show fontawesome icon on input onChange function
Posted
Updated 18-May-24 2:26am
v3

There was so much wrong with the code the way you wrote it that I ended up rewriting it from scratch.
HTML
<!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; /* Adjust the size as needed */
}
</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.
 
Share this answer
 
thanks a lot for helping
work perfectly
 
Share this answer
 
Comments
Pete O'Hanlon 23-May-24 6:15am    
You're welcome. I'm glad it's working for you now.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900