Resumen de IA
¿Te gustaría añadir iconos a tus formularios? Los iconos pueden ser una excelente manera de reforzar visualmente el propósito de un campo y pueden hacer que tus formularios parezcan más personalizados.
Este tutorial explicará cómo añadir iconos de Font Awesome a tus formularios.
En este artículo
Añadir Font Awesome a tu sitio
El primer paso es añadir la biblioteca de iconos de Font Awesome a tu sitio. Font Awesome es una gran opción para añadir iconos a tus formularios porque sus iconos actúan como una fuente y adoptarán el mismo color y tamaño que las otras fuentes de tu sitio.
Hay muchas maneras de añadir la biblioteca de iconos de Font Awesome a tu sitio, desde añadir código al encabezado de tu sitio hasta instalar un plugin. Para obtener detalles sobre cada opción, consulta la guía de WPBeginner para añadir fuentes de iconos a WordPress.
Para simplificar, usaremos el plugin Better Font Awesome. Es un plugin gratuito de WordPress que añade los recursos necesarios para usar iconos de Font Awesome en tu sitio.
Cuando estés listo, procede a instalar el plugin. Puedes continuar con el siguiente paso del tutorial tan pronto como se active.
Elegir un icono de Font Awesome
Una vez que tengas la capacidad de usar Font Awesome en tu sitio, puedes empezar a buscar los iconos que te gustaría usar en tus formularios.
Nota: Font Awesome ofrece iconos gratuitos y de pago. Puedes usar el menú de la izquierda en el sitio de Font Awesome para ver solo iconos gratuitos fácilmente.
En la página del icono que te gustaría usar, busca el valor unicode que se muestra justo debajo del nombre del icono.
En la imagen de arriba, el unicode es f1d8.
Toma nota del unicode de cada icono que te gustaría usar en tus formularios, ya que necesitarás incluirlo en tus fragmentos CSS personalizados más adelante en este tutorial.
Añadir iconos a tus formularios
Hay varias maneras de incorporar iconos en tus formularios. Hemos cubierto varios ejemplos a continuación, pero hay algunas cosas a tener en cuenta antes de sumergirte en ellos.
En primer lugar, casi todos los ejemplos a continuación requieren que añadas CSS personalizado a tu sitio de WordPress. Para obtener detalles sobre cómo hacerlo, consulta la guía paso a paso de WPBeginner para añadir CSS personalizado a tu sitio.
Nota: Especialmente si planeas añadir el CSS de este tutorial a la hoja de estilos de tu tema, te recomendamos encarecidamente usar un tema hijo. Para más información sobre cómo crear un tema hijo, consulta la guía de WPBeginner para crear un tema hijo.
Además, la familia de fuentes que necesitas usar en tus fragmentos CSS depende de si usas un icono gratuito o de pago de Font Awesome.
Nota: En este tutorial, nuestros ejemplos utilizan la familia de fuentes "Font Awesome 5 Free", que es para iconos gratuitos. Si tiene una licencia para los iconos Pro de Font Awesome, asegúrese de hacer referencia a la familia de fuentes correcta. Consulte la documentación oficial de Font Awesome sobre pseudo-elementos CSS para conocer la familia de fuentes adecuada para su versión. Simplemente reemplace "Font Awesome 5 Free" en los fragmentos proporcionados con su familia de fuentes específica.
Mostrar iconos delante de los títulos de los formularios
Para agregar un icono delante del título de su formulario, necesita crear un CSS personalizado que inserte el icono por usted. Este CSS será un poco diferente dependiendo de si desea que el icono aparezca delante de los títulos de todos los WPForms en su sitio, o solo de uno específico.
Agregar un icono a todos los títulos de formularios
El CSS para mostrar un icono delante de todos los títulos de formularios es simple porque es más general. Aquí está el fragmento de CSS que necesitará:
.wpforms-form .wpforms-title:before {
content: '\f1d8'; /* Unicode for icon, be sure to keep the quotes and backslash */
font-family: "Font Awesome 5 Free";
margin-right: 10px !important; /* Distance between icon and title */
}
Nota: Al agregar CSS a su sitio, puede ser necesario incluir !important antes del punto y coma para asegurarse de que sus estilos personalizados se apliquen correctamente. Consulte nuestra guía para solucionar problemas de CSS para obtener más detalles.
Hay algunas líneas en este fragmento que necesitará personalizar. Primero, tenga en cuenta que el unicode de Font Awesome para el icono que hemos elegido se incluye después de content:.
Puede reemplazar este valor con el unicode de cualquier otro icono de la biblioteca de Font Awesome.
Este CSS también incluye un margen derecho de 10 píxeles. Sin esto, no habría espacio entre el icono y el título del formulario. Puede personalizar este número al tamaño que desee.
En el frontend, este ejemplo se ve así:
Agregar un icono al título de un formulario específico
En lugar de agregar el mismo icono a los títulos de todos los formularios de su sitio, puede usar un CSS más específico para dirigirse a un solo formulario.
Para hacerlo, necesitará encontrar el número de ID único para el formulario cuyo título desea agregar un icono.
Puede encontrar un ID de formulario en su shortcode, que puede ver yendo a WPForms » Todos los formularios y mirando en la columna Shortcode.
Usaremos el número de ID 30 para hacer nuestro CSS más específico. Aquí está el CSS que solo agregará un icono delante del título del formulario identificado:
#wpforms-30 .wpforms-form .wpforms-title:before {
content: '\f1d8'; /* Unicode for icon, be sure to keep the quotes and forward slash */
font-family: "Font Awesome 5 Free";
margin-right: 10px !important; /* Distance between icon and title */
}
Este CSS es casi exactamente el mismo que el fragmento que agregará iconos a todos los títulos de formularios de su sitio. La única diferencia es que agregamos #wpforms-form-30, por lo que ahora este estilo se aplicará solo a este formulario.
Para su propio formulario, solo necesitará cambiar el número de ID del formulario y reemplazar el unicode del icono que desea mostrar, como se describe en la sección anterior.
Mostrar iconos delante de las etiquetas de campo
Puede agregar un icono delante de cada una de las etiquetas de campo en sus formularios utilizando un fragmento de CSS personalizable. El código que necesita agregar cambiará ligeramente dependiendo de si desea usar un icono para todas las etiquetas de campo en su sitio, o si desea mostrar un icono delante de una etiqueta de campo específica.
Añadir un icono a las etiquetas de todos los campos
Mostrar un icono delante de las etiquetas de todos los campos de su sitio requiere un fragmento de CSS muy similar al que se describe anteriormente para los títulos de los formularios:
.wpforms-form .wpforms-field-label:before {
content: '\f1d8'; /* Unicode for icon, be sure to keep the quotes and forward slash */
font-family: "Font Awesome 5 Free";
margin-right: 10px !important; /* Distance between icon and label */
}
Asegúrese de reemplazar la unicode en el fragmento anterior con la del icono que desea utilizar. También puede ajustar el tamaño del margen según sus preferencias.
En el frontend, los iconos de las etiquetas de sus campos deberían verse algo así:
Añadir un icono a la etiqueta de un campo específico
Es posible que no desee que el mismo icono aparezca junto a cada campo. Para dirigirse a un solo campo, el fragmento de CSS debe ser más específico, incluyendo el ID único del campo cuya etiqueta desea añadir un icono.
Este enfoque es muy similar a dirigirse al título de un solo formulario, como se describe anteriormente.
Para encontrar el ID del campo que necesita usar en el fragmento, abra su formulario en el frontend, ya sea en una página publicada o utilizando la vista previa del formulario. Luego, haga clic derecho en el campo al que desea dirigirse y elija Inspeccionar.
Su pantalla debería dividirse para mostrar el código fuente de la página. Asegúrese de que todo el campo al que desea dirigirse esté resaltado (incluyendo la etiqueta y el cuadro de entrada), luego busque el ID.
Nota: El ID del campo que puede encontrar usando el inspector de su navegador es diferente del ID del campo que puede ver en el constructor de formularios.
Al personalizar el fragmento de CSS para añadir iconos a las etiquetas de campos específicos, asegúrese de usar el ID completo del campo del inspector, no el ID del campo del constructor de formularios.
Para el campo en la imagen anterior, el ID es wpforms-9-field_0-container.
Aquí está el fragmento de CSS para añadir un icono a la etiqueta de un campo específico:
.wpforms-form #wpforms-9-field_0-container .wpforms-field-label:before {
content: '\f1d8'; /* Unicode for icon, be sure to keep the quotes and forward slash */
font-family: "Font Awesome 5 Free";
margin-right: 10px !important; /* Distance between icon and label */
}
Si observa la primera línea de este fragmento de CSS, notará que hemos añadido un #, seguido del ID que acabamos de encontrar. Ahora nuestro icono solo se añadirá a este único campo, sin alterar ninguna otra etiqueta de campo (en este formulario o en cualquier otro).
Mostrar iconos en los campos de entrada
En lugar de añadir un icono a la etiqueta de un campo, puede mostrarlo dentro del propio campo. El fragmento de código que necesitará usar para ello es bastante diferente de los otros en este tutorial, pero utiliza muchos de los mismos elementos:
#wpforms-form-9 .wpforms-field,
#wpforms-form-9 .wpforms-field .wpforms-field-row-block {
position: relative;
}
#wpforms-form-9 input[type="text"],
#wpforms-form-9 input[type="email"],
#wpforms-form-9 textarea {
padding-left: 35px !important;
}
#wpforms-form-9 .wpforms-field .wpforms-field-label {
position: relative;
}
#wpforms-form-9 .wpforms-field .wpforms-field-label:before,
#wpforms-form-9 .wpforms-field .wpforms-field-row-block:before {
position: absolute;
left: 10px;
top: 32px;
z-index: 99999;
color: #757575;
font-size: 17px;
opacity: 0.3;
}
#wpforms-9-field_0-container .wpforms-field-label:before,
#wpforms-9-field_1-container .wpforms-field-label:before,
#wpforms-9-field_2-container .wpforms-field-label:before {
font-family: "Font Awesome 5 Free";
}
#wpforms-9-field_0-container .wpforms-field-label:before {
content: '\f007';
}
#wpforms-9-field_1-container .wpforms-field-label:before {
content: '\f0e0';
}
#wpforms-9-field_2-container .wpforms-field-label:before {
content: '\f086';
}
Las partes de este fragmento que necesitará personalizar son las siguientes:
- Cambie el número en
#wpforms-form-9al ID del formulario al que desea añadir sus iconos. Puede encontrar este ID en el shortcode de su formulario, como se describe anteriormente en este tutorial. - Reemplace
wpforms-9-field_0-containery los otros IDs de campo en el fragmento anterior con los IDs de campo de su propio formulario. Debe usar el ID completo del campo como se describe en la sección anterior de este artículo. - Sustituya las unicodes en el fragmento anterior (
f007,f0e0yf086) por las unicodes de los iconos de Font Awesome que desee utilizar.
Nuestro fragmento de ejemplo a ilde{a}de iconos a tres campos de nuestro formulario. Puede a ilde{a}dir iconos a m ilde{a}s campos repitiendo la l ilde{a}nea que dice #wpforms-9-field_0-container .wpforms-field-label:before, y a ilde{a}diendo sus propios ID de formulario y campo.
Luego, repita la ilde{u}ltima l ilde{a}nea del fragmento, sustituyendo su propio ID de campo por el del ejemplo.
Nota: Este fragmento solo es compatible con los siguientes tipos de campo:
- Texto de una sola línea
- Texto de párrafo
- Nombre
- Correo electrónico
- Sitio web / URL
Tambi ilde{a}n puede eliminar estas l ilde{a}neas para a ilde{a}dir iconos a menos campos en su formulario.
Finalmente, si desea cambiar la apariencia de sus iconos, puede ajustar su posici ilde{o}n, color, tama ilde{n}o y opacidad cambiando los valores en las siguientes l ilde{a}neas:
position: absolute; left: 10px; top: 32px; z-index: 99999; color: #757575; font-size: 17px; opacity: 0.3;
En el frontend, nuestro ejemplo se ve as ilde{a}:
Mostrar iconos en campos HTML
A ilde{a}dir iconos a campos HTML es la opci ilde{o}n m ilde{a}s sencilla y no requiere CSS personalizado.
Solo necesitar ilde{a} a ilde{a}dir un c ilde{o}digo corto simple dentro del campo HTML. Como ejemplo, aqu ilde{i} tiene el c ilde{o}digo corto que necesitar ilde{a}amos para el icono del avi ilde{o}n de papel que hemos utilizado en varios de nuestros ejemplos anteriores:
[icon name="paper-plane"]
Para ajustar esto para un icono diferente, solo tendr ilde{a} que copiar el nombre de la p ilde{a}gina del icono espec ilde{i}fico en Font Awesome. El nombre del icono estar ilde{a} en texto grande cerca de la parte superior de la p ilde{a}gina.
Luego, reemplace paper-plane en el c ilde{o}digo corto anterior con el nombre del icono que desea usar.
En el frontend, un icono en un campo HTML podr ilde{i}a verse algo as ilde{i}:
En un campo HTML, tambi ilde{a}n puede a ilde{a}dir texto o HTML adicional alrededor del c ilde{o}digo corto del icono si lo desea. Para m ilde{a}s detalles, consulte nuestro tutorial completo sobre el campo HTML.
A ilde{a}dir iconos a los botones de env ilde{i}o
El ilde{u}ltimo ejemplo que compartiremos en este tutorial es c ilde{o}mo a ilde{a}dir un icono al bot ilde{o}n de Enviar de sus formularios.
Aqu ilde{i} tiene el fragmento que necesitar ilde{a}:
.wpforms-form button[type=submit]:before {
content: '\f1d8'; /* Unicode for icon, be sure to keep the quotes and forward slash */
font-family: "Font Awesome 5 Free";
margin-right: 10px !important; /* Distance between icon and button text */
}
Al igual que con los otros ejemplos de este art ilde{i}culo, aseg ilde{u}rese de sustituir el unicode de su icono deseado y cambie el margen si lo desea.
En el frontend, el icono de su bot ilde{o}n de env ilde{i}o se ver ilde{a} similar a este:
Colocar iconos en el lado derecho
Si desea colocar iconos en el lado derecho de un elemento en lugar del izquierdo, puede usar :after en lugar de :before. Por ejemplo, para colocar el icono del avi ilde{o}n de papel en el lado derecho del bot ilde{o}n de env ilde{i}o, puede usar el siguiente fragmento de c ilde{o}digo:
.wpforms-form button[type=submit]:after {
content: '\f1d8'; /* Unicode for icon, be sure to keep the quotes and forward slash */
font-family: "Font Awesome 5 Free";
margin-right: 10px !important; /* Distance between icon and button text */
}
El fragmento anterior colocar ilde{a} el icono a la derecha de su bot ilde{o}n de env ilde{i}o:
¡Eso es todo! Ahora puede a ilde{a}dir iconos a varios elementos de sus formularios.
ilde{A}s como personalizar la apariencia de sus formularios utilizando una imagen de fondo? Consulte nuestro tutorial sobre c ilde{o}mo a ilde{a}dir im ilde{a}genes de fondo a sus formularios con CSS.