icône impressionnante police ne fonctionne pas comme contenu en CSS

voix
2

Je sais qu'il ya beaucoup de questions similaires ici SO, mais pour une raison quelconque, les réponses fournies ne fonctionnera pas pour moi. Je devais utiliser cette police icône impressionnante, mais il ne sera pas montrer. Lorsque je tente d' autres icônes, ils travaillent. J'ai suivi cette documentation.

Voici comment cela montre maintenant: entrez

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

Créé 20/10/2018 à 02:51
source utilisateur
Dans d'autres langues...                            


2 réponses

voix
4

Vous devez définir la font-weightpropriété. Vous pouvez essayer cela et il devrait fonctionner:

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

entrez la description d'image ici

Créé 20/10/2018 à 03:01
source utilisateur

voix
0

Vous pouvez utiliser « classe » pour les icônes de 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>
.....
Créé 20/10/2018 à 03:08
source utilisateur

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more