Шрифтовая иконка не работает как контент в CSS

Question

Я знаю, что в SO много подобных вопросов, но по некоторым причинам предоставленные ответы не будут работать для меня.Я должен был использовать этот шрифт потрясающий значок, но он не будет отображаться.Когда я пробую другие значки, они работают.Я следил за этой документацией.

Вот как она показывает сейчас:

.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>

Answer 1

Вы можете использовать «класс» для fa-иконок.

.....
<div class="form-group input-validation-error">
 <i class="fa fa-exclamation-circle input-validation-error"></i>
 <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Nombre de usuario">
</div>
.....

Answer 2

Вы должны установить свойство font-weight.Вы можете попробовать это, и оно должно работать сейчас:

.input-validation-error::before {
    font-family: "Font Awesome 5 Free";
    color: red;
    position: relative;
    content: "\f06a";
    font-weight: 900;
}