0

Tengo un problema, es mas de estetica.

Estoy haciendo un buscador. Y a dicho buscador en el placeholder le estoy poniendo un icono de search, estoy usando FontAwesome para esto. Segun la documentacion, lo que debo hacer es añadir un elemento y luego añadirle el pseudo elemento class::placeholdery aqui añadir

.header-search {
   margin-left: 250px;
   font-family: 'Poppins', sans-serif !important;
}

.header-search::placeholder {
   font-family: "Font Awesome 5 Pro";
   font-weight: 300;
}

HTML

<input type="text" class="header-search" placeholder="  Components...">

El pequeño rectangulo es el icono. Asi lo ofrece FontAwesome.

Algo asi, al placeholder le añado font-family de FontAwesome y el weight... el problema es que la fuente le añade tambien al texto del place holder no solo al icono. Y esa fuente no me gusta. Hay alguna forma de designar una fuente diferente para el texto?

1

1 respuesta 1

3

La solucion era tan sencilla como añadir la fuente principal antes de la fuente de FontAwesome.

.header-search::placeholder {
    font-family: 'Poppins', "Font Awesome 5 Pro";
    font-weight: 300;
}

Asi el icono se añadirá, y tendra comp principal la fuente que tu pongas primero. En este caso Poppins...

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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