Cómo agregar el ícono de fuente impresionante al botón Enviar del formulario de contacto 7

Un simple botón “Enviar” en su formulario de contacto parece genérico. Añadiendo un fuente impresionante ícono dentro del botón enviar de su formulario de contacto 7 le da una señal visual que llama la atención y aclara la acción. Piense en un ícono de plano de papel al lado de “Enviar mensaje” o un ícono de sobre al lado de “Enviar”

¿el pescar? El formulario de contacto 7 no tiene una opción incorporada para agregar íconos a los botones. Debe insertar el código hexadecimal Unicode del ícono directamente en la etiqueta del formulario CF7 y emparejarlo con un pequeño fragmento CSS para cargar la fuente correcta.

Este tutorial lo guía a través de todo el proceso paso a paso. Aprenderás a agregar un fuente impresionante icono en el botón de envío CF7, agregue íconos dentro de los marcadores de posición del campo de formulario y maneje la configuración de la familia de fuentes Font Awesome tanto para usuarios de Elementor como para configuraciones que no son de Elementor. Actualizado para Font Awesome 5, 6 y las últimas versiones de Elementor de 2026.

Lo que necesitarás

Antes de comenzar, asegúrese de tenerlos en su lugar:

• WordPress con Formulario de contacto 7 instalado y activado
• Fuente impresionante cargado en su sitio (a través de Elementor, un complemento o CDN manual)
• Acceso a tu tema Css personalizado panel (Apariencia > Personalizar > CSS adicional)
• El código hexadecimal Unicode para el icono que desees (te mostraremos dónde encontrar esto)

Timp necesar: 5-10 minutos

Nivel de habilidad: Principiante (no se necesita experiencia en codificación, solo copie y pegue)

Paso 1: habilite Font Awesome en su sitio

Su sitio necesita cargar Font Awesome antes de que se representen los iconos. La forma en que haces esto depende de tu configuración:

Si estás usando Elementor (método más fácil)

Elementor se envía con Font Awesome integrado. Solo necesita asegurarse de que la compatibilidad con versiones anteriores de Font Awesome 4 esté habilitada si está utilizando códigos de ícono más antiguos.

1. Ir a Elementor > Configuración > Avanzado pestaña en su panel de WordPress
2. Encontrar “Cargar soporte Font Awesome 4” y configúrelo en “Sí”
3. Hacer clic Guardar cambios

Actualizare 2026: Elementor ahora carga Font Awesome 6 de forma predeterminada en versiones recientes. El interruptor “Cargar soporte de Font Awesome 4” garantiza la compatibilidad con versiones anteriores de códigos de iconos más antiguos. Si estás usando códigos de iconos FA6 (como los del Búsqueda de iconos de Font Awesome 6), no necesitas cambiar nada ya que Elementor lo maneja automáticamente.

Si también estás usando Complementos maestros para Elementor, obtienes acceso a 8 bibliotecas de iconos premium más allá de Font Awesome, lo que le brinda miles de íconos adicionales directamente dentro del editor Elementor.

Si no estás usando Elementor

Instalar el oficial Complemento de fuente impresionante de WordPress.org. Después de la activación:

1. Ir a Configuración > Fuente impresionante
2. Elige tu versión (Font Awesome 5 Gratis o 6 Gratis)
3. Seleccione el método de entrega (CDN para v5 o un kit para v6)
4. Guarde y estará listo para usar íconos en su sitio

Importante: Font Awesome 6 no está disponible a través del CDN heredado. Si desea íconos FA6, deberá configurar un kit gratuito en fontawesome.com o utilice la integración del kit del complemento de WordPress.

Paso 2: busque el código hexadecimal Unicode del icono

Cada ícono de Font Awesome tiene un código hexadecimal Unicode único. Este es el código que pegarás en el botón de envío del Formulario de contacto 7.

Aquí se explica cómo encontrarlo:

1. Ir al Página de búsqueda de iconos de Font Awesome
2. Busque el icono que desee (por ejemplo, “plano de papel”, “sobre”, “flecha derecha”)
3. Haga clic en el icono para abrir su página de detalles
4. Busque el Unicode valor. Es un código hexadecimal de 4-5 caracteres f1d8 (plano de papel) o f0e0 (sobre)

Aquí hay algunos íconos populares para los botones de envío y sus códigos Unicode:

Paso 3: agregue el ícono Font Awesome al botón Enviar de su formulario de contacto 7

Ahora para el evento principal. Insertarás el código hexadecimal Unicode del icono directamente en la etiqueta del formulario CF7. Aquí está el proceso exacto:

Abra su formulario de contacto

Ir a Contacto > Formularios de contacto en su panel de WordPress. Haga clic en el formulario que desea editar (o crear uno nuevo).

Encuentre la etiqueta del botón Enviar

En el editor de formularios, busque la etiqueta del botón de envío. Normalmente se ve así:

[submit "Submit"]

Inserte el código hexadecimal Unicode

Reemplace la etiqueta de envío con el código de ícono colocado al lado del texto de su botón. Utilice el formato de entidad HTML &#x + cod hexagonal + ;

Por ejemplo, para agregar un ícono de plano de papel después del texto “Enviar mensaje”:

[submit "Send Message "]

O poner el icono antes del texto:

[submit " Send Message"]

Aquí hay un ejemplo completo del formulario de contacto con el ícono en el botón enviar:

<label>Your Name
    [text* your-name]</label>

<label>Your Email
    [email* your-email]</label>

<label>Subject
    [text your-subject]</label>

<label>Your Message
    [textarea your-message]</label>

[submit "Send Message &#xf1d8;"]

Paso 4: agregue el CSS para la fuente Icon

El ícono no se mostrará correctamente hasta que le indique al navegador qué fuente usar para el botón de envío. Sin este CSS, verás un pequeño cuadrado o un signo de interrogación en lugar del ícono.

Ir a Apariencia > Personalizar > CSS adicional y pegue uno de los siguientes fragmentos:

Para Font Awesome 5 (predeterminado de Elementor)

.wpcf7 input[type="submit"] {
    font-family: "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
}

Para fuente impresionante 6

.wpcf7 input[type="submit"] {
    font-family: "Font Awesome 6 Free", sans-serif;
    font-weight: 900;
}

El font-weight: 900 es necesario para iconos sólidos (el estilo más común). Si estás usando íconos regulares, cámbialo a font-weight: 400. Para íconos de marca (como el logotipo de Twitter o GitHub), utilícelos font-family: "Font Awesome 6 Brands" con font-weight: 400.

Consejo profesional: Si el ícono aparece en el escritorio pero no en el móvil, agregue -webkit-font-smoothing: antialiased; y text-rendering: auto; a la regla CSS. Esto corrige las inconsistencias de representación en todos los navegadores.

Guarde su CSS y obtenga una vista previa del formulario. Ahora debería ver el icono representado dentro del botón de envío junto al texto.

Bonificación: agregue iconos impresionantes de fuentes a los campos de marcador de posición CF7

¿quiere íconos dentro de los marcadores de posición de su campo de formulario también? Puede agregar un ícono de sobre en el campo de correo electrónico, un ícono de usuario en el campo de nombre y un ícono de lápiz en el campo de mensaje. Adopta el mismo enfoque Unicode.

Aquí está el código CF7 con íconos en los marcadores de posición:

[text* your-name placeholder " Your Name"]

[email* your-email placeholder " Your Email"]

[text your-subject placeholder " Subject"]

[textarea your-message placeholder " Your Message"]

[submit "Send Message "]

Ahora agregue el CSS para aplicar la fuente Font Awesome a sus marcadores de posición:

/* Icon font for submit button */
.wpcf7 input[type="submit"] {
    font-family: "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
}

/* Icon font for input placeholders */
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
    font-family: "Font Awesome 5 Free", Arial, sans-serif;
    font-weight: 900;
    color: #999;
}

Nota sobre fuentes de marcador de posición: Configuración font-family en los marcadores de posición afecta a todo el texto del marcador de posición, no solo al icono. Si el resto del texto del marcador de posición se ve diferente a lo esperado, agregue la fuente del cuerpo de su tema como alternativa: font-family: "Font Awesome 5 Free", "Your-Theme-Font", sans-serif;

El método sin código: estilo CF7 con complementos maestros para Elementor

Si prefieres omitir el CSS por completo, Complementos maestros para Elementor incluye un dedicado Formulario de contacto 7 widget que te permite personalizar la apariencia de tu formulario visualmente, sin escribir una sola línea de código.

Esto es lo que puedes hacer con el Widget del formulario de contacto 7 de MA:

• Estiliza el botón enviar con colores, degradados, efectos flotantes, bordes y acolchado personalizados
• Personaliza los campos de entrada con colores de fondo, radio de borde y tipografía
• Aplique ajustes preestablecidos de estilo prediseñados para obtener una forma pulida con un solo clic
• Controlar el espaciado y el diseño para cada elemento de forma del panel Elementor
• Utilice cualquier icono de 8 bibliotecas de iconos premium incluido con complementos maestros

Este es el enfoque más rápido si desea que su formulario de contacto coincida con el diseño de su sitio sin profundizar en los selectores CSS. Simplemente arrastre el widget, elija su formulario y diseñe todo desde el editor visual.

Solución de problemas comunes

El icono se muestra como un cuadro cuadrado o un signo de interrogación

Esto significa que la fuente Font Awesome no se está cargando para el botón de envío. Verifique eso:

• Font Awesome está activado en su sitio (configuración de Elementor o complemento FA)
• Tu CSS incluye lo correcto font-family y font-weight
• Estás usando la versión correcta (los apellidos de fuentes FA5 vs FA6 son diferentes)

Aparece el icono pero el texto normal parece extraño

Cuando configuras font-family para Font Awesome durante todo el botón, todo el texto del botón usa esa fuente. Agregue una fuente alternativa: font-family: "Font Awesome 5 Free", -apple-system, Arial, sans-serif;

El icono funciona en el escritorio pero no en el móvil

Agregue estas propiedades a su regla CSS:

.wpcf7 input[type="submit"] {
    font-family: "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: auto;
}

Quiero usar un pseudoelemento ::antes

El botón de envío CF7 es un <input type="submit"> elemento. Los elementos de entrada no son compatibles ::before o ::after pseudoelementos porque no pueden tener nodos secundarios. Por eso utilizamos el enfoque hexadecimal Unicode directamente en el texto del botón. Si necesita soporte para pseudoelementos, deberá convertir el botón de envío a a <button> etiquete usando un gancho de filtro CF7, que requiere PHP personalizado.

Preguntas frecuentes

Envolviendo

Añadiendo un fuente impresionante icono en el botón de envío de su formulario de contacto 7 es un pequeño cambio que marca una diferencia notable. El método de código hexadecimal Unicode funciona en Font Awesome 5 y 6, requiere solo dos pasos (editar la etiqueta del formulario + agregar CSS) y tarda menos de 5 minutos en configurarse.

Para el enfoque de marcador de posición, se aplica la misma lógica: pegue el código hexadecimal dentro del atributo de marcador de posición y defina la familia de fuentes en su CSS. Ambos métodos dan a sus formas una sensación más pulida y profesional.

Si desea omitir CSS por completo, el Widget CF7 de complementos maestros maneja visualmente el estilo del formulario dentro de Elementor. De cualquier manera, sus formularios se verán mejor que la salida CF7 predeterminada.

Lectura relacionada: Guía de bibliotecas de fuentes e iconos Elementor | Cómo crear botones animados en Elementor | Estilismo CF7 con complementos maestros