Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Font awesome icon not working as content in CSS

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: enter image description here

.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>
like image 915
Paula Avatar asked Oct 20 '18 02:10

Paula


People also ask

Why are font awesome icons not working?

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.

Why do my font awesome icons show up as blank squares?

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.


1 Answers

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;
}

enter image description here

like image 131
HugoTeixeira Avatar answered Sep 24 '22 16:09

HugoTeixeira