Showing icon on results after selection – Blancer.com Tutorials and projects

Am having a script below which is working and outputting results very well.

but my problem is that i wanted to change and output results with icon

i changed from

$("#results").text(firstname + " " + lastname);

$("#results").html("<i class='fa fa-user-circle-o'></i>" firstname + " " + lastname);

but its not working

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<body>



  <select id="fname">
   <option value="">Select Firstname</option>
    <option value="jone">jone</option>
  </select>
  
    <select id="lname">
    <option value="">Select Lastname</option>
    <option value="micheal">micheal</option>
  </select>

 <br>
 <br>
 <p>My fullname is:</p>
 <div id="results"></div>
<script>
            $("select").on("change", function (e) {
                var firstname = $("#fname").children("option:selected").val();
                var lastname = $("#lname").children("option:selected").val();
                $("#results").text(firstname + " " + lastname);
            });
            
            </script>

</body>
</html>