I know there are many similar questions here in SO, but for some reason, the answers provided won't work for me. I was to use this font awesome icon, but it won't show. When I try other icons, they work. I have been following this documentation.
This is how it shows now:
.input-validation-error input {
border: 2px solid #f46262;
}
.input-validation-error input[type="text"] {
position: relative;
}
.input-validation-error::before {
font-family: "Font Awesome 5 Free";
color: red;
position: relative;
content: "\f06a";
}
<!-- FONT AWESOME -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<form class="registration-form">
<div class="form-group input-validation-error">
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Nombre de usuario">
</div>
</form>
Make sure that the Font Awesome CSS file is loaded and that the "webfonts" folder is not missing in the website project. To check whether the CSS file is loaded well, open your page source code on a web browser by right-clicking on the page and selecting "View page source" or by pressing Ctrl+U while on the page.
Quoted from their website: The fa prefix has been deprecated in version 5. The new default is the fas solid style and the fab style for brands. This is why my fonts were showing blank squares.
You have to set the font-weight
property. You can try this and it should work now:
.input-validation-error::before {
font-family: "Font Awesome 5 Free";
color: red;
position: relative;
content: "\f06a";
font-weight: 900;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With