I have included Font Awesome icons within the <span> tags and applied the necessary styles in my CSS file. However, the icon is not being displayed correctly. I am looking for a solution to ensure the correct display of the icons.
The HTML code where I added the Font Awesome looks like this:
<span class="focus-input100" data-placeholder="";> </span>Here is the HTML markup:
<div class="wrap-input100 validate-input" data-validate = "Enter username">
<input class="input100" type="text" name="username" placeholder="Username" >
<span class="focus-input100" data-placeholder="";> </span>
</div>
And here is the associated CSS:
.focus-input100 {
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
}
.focus-input100::before {
content: "";
display: block;
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
background: #fff;
}
... (Additional CSS properties)
Despite following the above code, the icons appear as small rectangular boxes instead of the intended images. I seek assistance in resolving this issue to display the correct icons.
To view the problem firsthand, visit this link: