1

No me muestra el ícono, le agregue font-weight y font-family asi que no sé por qué no esta funcionando, este es mi código.

<div className="box">
   <select className="select-css btn mr-2" onChange={ handleChange("category") }>
      <option valu="All">Pick category</option>
         { categories.map((cat, i) => (<option key={i} value={cat._id} > {cat.name}
      </option>)) 
         }
   </select>
</div>

Mi CSS

.box:before {
   font-family: "Font Awesome 5 Free";
   font-weight: 900;
   content: '\f078';
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   width: 50px;
   height: 50px;
   color: #fff;
}
14
  • ok, ya lo edite pero no se de que sirva el html en este caso. Commented el 11 sept. 2019 a las 17:46
  • click derecho, inspeccionar elemento, pestaña Network, revisa si font awesome está bien direccionado, es decir, si la ruta es válida. Es muy común tener errores 404 por efecto de rutas mal construidas.
    – fredyfx
    Commented el 11 sept. 2019 a las 17:50
  • Cambia .box:before por .box::before Commented el 11 sept. 2019 a las 17:55
  • lo cambie y sigue sin funcionar :( Commented el 11 sept. 2019 a las 18:01
  • uso className porque estoy usando React. Commented el 11 sept. 2019 a las 18:02

1 respuesta 1

1

Tienes que cambiar el div por un span ya que el font Awesome no se puede aplicar a los div

Te dejo el snippet con tres ejemplos

.boxx:before {
   font-family: "Font Awesome 5 Free"; 
   font-weight: 900; 
   content: "\f078";


}


.box::before {
   font-family: "Font Awesome 5 Free", sans-serif;
   content: "\f057";
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

 <label>Ejemplo 3</label>
 <br>
  <span class="boxx">
    <select className="select-css btn mr-2">
    <i class="fab fa-accessible-icon">
     <option>Valor 1</option>
     <option>Valor 2</option>
      </i>
     </select>
  </span>
  
  
 <br><br>
 <label>Ejemplo 2</label>
 <br>
 <span class="box">
    <select className="select-css btn mr-2">
    <i class="fab fa-accessible-icon">
     <option>Valor 1</option>
     <option>Valor 2</option>
      </i>
     </select>
  </span>
 <br><br>
 
 
 <label>Ejemplo 3</label>
 <br>
 <i class="fab fa-angular">
  <select className="select-css btn mr-2">
     <option>Valor 1</option>
     <option>Valor 2</option>
   </select>
 </i>
 
 
 <br><br>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.