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](https://fontawesome.com/icons/exclamation-circle?style=solid) font awesome icon, but it won't show. When I try other icons, they work. I have been following [this documentation.](https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements) 

This is how it shows now:
[![enter image description here](https://i.stack.imgur.com/nHWLN.png)](https://i.stack.imgur.com/nHWLN.png)

```css
.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";
}
```

```html
<!-- 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>
```