Cómo crear botones de fuente de iconos con Divi


Los botones de fuentes de iconos tienen muchos usos en el mundo del diseño web. Dado que los íconos de fuentes se mantienen nítidos en color y diseño a medida que se escalan a diferentes tamaños, tiene sentido usarlos en botones. Y, crear un botón de fuente de icono en Divi es bastante fácil usando la fuente de icono elegante. En este tutorial, le mostraré cómo puede usar fuentes de iconos con el módulo de botones de Divi para crear un solo botón de icono.

Algunos de los aspectos más destacados de este tutorial incluyen:

  • Cómo usar la fuente elegante para agregar un ícono como texto de botón
  • Cómo agregar relleno y radio de borde que asegure que el botón tome la forma de un cuadrado o círculo perfecto
  • Cómo reemplazar el ícono del botón con un ícono diferente al pasar el mouse
  • Cómo colocar el icono de un botón para superponer una imagen
  • y más…

Vistazo

Aquí hay un adelanto de lo que está por venir …

botones de fuente de icono

botones de fuente de icono

botones de fuente de icono

Que necesitas

Para este tutorial, usaré lo siguiente:

  • Tema Divi (obviamente)
  • Los iconos de fuentes elegantes – Una vez que descargue el archivo zip de la publicación del blog, arrastraremos el archivo de fuente eleganticons.ttf para usarlo como fuente personalizada para nuestro módulo de botones.
  • El diseño de la página de inicio de Bed & Breakfast (disponible de forma gratuita en Divi Builder)

¡Empecemos!

Agregar la fuente Elegant Icon a su módulo de botones

Agregar un módulo de botones

Para comenzar, cree una nueva página e implemente el constructor visual. Elija "Construir desde cero" y luego, una vez implementado el constructor visual, agregue una fila de una columna a la sección y luego agregue un módulo de botón a la fila.

botones de fuente de icono

Arrastra la fuente Elegant Icon

Para obtener la fuente Elegant Icon, vaya a la Entrada de blog de Elegant Icon Font y descargue el archivo de fuente. Extraiga el contenido del archivo zip y busque los elegantes archivos de fuentes de iconos navegando a elegant_font> HTML CSS> fonts. Luego, arrastre el archivo "ElegantIcons.ttf" de su archivo de computadora y suéltelo en el constructor visual.

botones de fuente de icono

Esto hará que aparezca el modal Cargar fuente automáticamente. Simplemente haga clic en el botón de carga para cargar la fuente en Divi Builder.

botones de fuente de icono

Ahora tendrá acceso a la elegante fuente de iconos cuando personalice la fuente de cualquier módulo en el constructor visual.

Vaya a la configuración del módulo de botones y actualice la fuente del botón con la nueva Fuente de icono elegante que acaba de cargar. Aparecerá en la lista de íconos debajo de "Fuentes personalizadas".

botones de fuente de icono

Puede notar que ahora el texto de su botón se ha transformado en un montón de iconos. Esto se debe a que cada carácter ingresado en el cuadro de entrada de texto del botón ahora tiene un icono que corresponde a la letra / carácter que se está utilizando actualmente.

botones de fuente de icono

Dado que solo necesitamos un icono para nuestro botón, puede seleccionar cualquier carácter en el teclado para generar el icono asociado con ese carácter. Por ejemplo, ingrese el número 5 para el texto de su botón para obtener una flecha de cheurón derecha.

botones de fuente de icono

Iconos de botón de intercambio al pasar

Como sabe, el módulo de botones incluye la opción de agregar iconos al pasar el mouse. Podemos usar esta funcionalidad para reemplazar la fuente del icono con el icono de desplazamiento para un buen efecto de desplazamiento. Todo lo que tenemos que hacer es modificar la configuración del botón de la siguiente manera:

Tamaño del texto del botón: 30px
Icono de botón: vea la captura de pantalla (este será el icono que reemplazará la fuente del icono utilizada para el botón)
Color del icono del botón: # 0c71c3 (debe coincidir con el color utilizado para el texto del botón)
Ubicación del icono del botón: Izquierda
Color del texto de desplazamiento del botón: rgba (255,255,255,0) (esto es completamente transparente para ocultar la fuente del icono del botón al desplazar el cursor)
Relleno personalizado: 1em a la izquierda, 1em a la derecha (este relleno anulará el relleno predeterminado del botón y evitará que se expanda al pasar el mouse)

botones de fuente de icono

Ahora todo lo que tenemos que hacer es anular el margen del elemento anterior en el CSS personalizado. Vaya a la pestaña Avanzado e ingrese el siguiente CSS en el cuadro anterior:

margin-left: 0 !important;

botones de fuente de icono

Ahora el ícono de su botón será reemplazado por el ícono de desplazamiento al pasar el mouse.

botones de fuente de icono

Creación de botones de icono de círculo perfecto que se escalan con el tamaño del texto del botón

Los diseños de botones circulares funcionan muy bien para botones de un solo icono. Y, si comprende el funcionamiento interno del espaciado del módulo de botones, puede crear botones perfectamente circulares que se escalen de acuerdo con el tamaño del texto del botón.

El truco consiste en espaciar el botón usando la unidad de longitud "em". Esta unidad de longitud es relativa al tamaño del texto del botón. Entonces, si el tamaño del texto del botón es 30px, 1em también es 30px (2em sería 60px y así sucesivamente…). Sabiendo esto, solo necesitamos asegurarnos de que nuestro acolchado alrededor de nuestro botón sea el mismo en los 4 lados. Pero lo que quizás no hayas considerado es que la altura de la línea del texto del botón es 1.7em por defecto. Eso significa que debemos tener eso en cuenta al agregar nuestros valores de relleno superior e inferior.

Para aquellos de ustedes que quieran saber las matemáticas detrás de los valores de relleno necesarios para crear botones circulares, aquí va:

Para el relleno izquierdo y derecho, configúrelos en 1em. Esto significa que el ancho total de nuestro botón será de 90 px (o 3 em) porque …

30 px de relleno izquierdo + 30 px de fuente de icono + 30 px de relleno derecho = 90 px en total

La altura de la línea de texto del botón es 1.7em, lo que equivale al 170% del tamaño del texto del botón (30 px), que es igual a 51 px.

Para el acolchado superior e inferior, configúrelos en 0.65em. 0.65em es el equivalente al 65% del tamaño del texto del botón (30px), lo que equivale a 19.5px.

Por lo tanto…

19,5 píxeles de relleno superior + 51 píxeles de altura de línea + 19,5 píxeles de relleno inferior = 90 píxeles en total

Esto significa que cuando el texto del botón se establece en 30 px, el tamaño total del botón será de 90 px por 90 px (un cuadrado perfecto). De hecho, puedes pensarlo de esta manera. Independientemente de lo que establezca como tamaño del texto del botón, el tamaño total del botón será el triple de ese valor. Entonces, un texto de botón de 40 px creará un botón de 120 px por 120 px, y así sucesivamente.

En este momento, el botón tiene las dimensiones correctas, pero sigue siendo cuadrado. Todo lo que tenemos que hacer es agregar un radio de borde del 50% para cambiar el botón cuadrado en un botón de círculo perfecto.

Esto es lo que necesita para convertir su botón en un botón circular:

Radio del borde del botón: 50%
Acolchado personalizado: 0.65em superior, 0.65em inferior, 1em derecho, 1em izquierdo

botones de fuente de icono

No olvide que puede ajustar el tamaño del texto del botón y el botón permanecerá perfectamente circular a medida que el relleno se adapte al tamaño del texto.

botones de fuente de icono

Agregar botones de iconos a su diseño Divi

Divi facilita la adición y personalización de botones de un solo icono para que se adapten al diseño de cualquier diseño prefabricado.

Para este ejemplo, le mostraré cómo agregar un solo botón de icono al diseño de la página de inicio de Bed & Breakfast.

Para agregar el diseño a su página, abra el menú de configuración haciendo clic en el ícono púrpura en la parte inferior de la página (asegúrese de que el generador visual esté habilitado). Luego haga clic en el icono Cargar desde biblioteca. Seleccione el diseño de la página de inicio de Bed & Breakfast y haga clic en el botón "Usar este diseño" para implementar el diseño en la página.

botones de fuente de icono

Agregar un botón de icono a una imagen

Supongamos que desea agregar un pequeño botón de ícono para superponer la esquina de una imagen para un CTA adicional que se vincule a un producto o servicio en particular. Todo lo que necesita hacer es agregar un módulo de botones debajo de la imagen y personalizarlo para incluir la fuente del icono y hacer que se superponga a la imagen con un espaciado personalizado.

Busque la sección "Acerca de nosotros" en el diseño de la página de inicio. Luego, agregue un módulo de botones directamente debajo de una de las imágenes utilizadas para presentar la "Habitación doble" (es el primero en la primera columna de la fila de tres columnas).

botones de fuente de icono

Luego abra la configuración del botón y ponga una “P” mayúscula en el cuadro de texto del botón. Esto cambiará a nuestro icono una vez que seleccione la fuente Elegante como Fuente del botón.

botones de fuente de icono

Para comenzar a hacer coincidir el diseño del botón con el diseño, guarde la configuración del botón y busque el botón "Reservar ahora" en la sección superior del diseño. Abra la configuración del botón y copie los estilos del botón haciendo clic con el botón derecho en el título Alternar opciones del botón y seleccionando la opción "Copiar estilos del botón" de la lista.

Ahora haga clic derecho en el módulo de botón que agregó debajo de la imagen y seleccione "Pegar estilos de botón".

botones de fuente de icono

Luego actualice la configuración del botón de la siguiente manera:

Fuente del botón: Fuente elegante
Ancho del borde del botón: 0px
Mostrar icono de botón: NO

Luego, agreguemos nuestro ingenioso relleno personalizado para asegurarnos de que el botón sea un cuadrado perfecto:

Acolchado personalizado: 0.65em superior, 0.65em inferior, 1em a la izquierda, 1em a la derecha

botones de fuente de icono

Para colocar el botón de modo que se superponga a la esquina inferior derecha de la imagen, primero deberá deshacerse del margen inferior del módulo de imagen de arriba. Abra la configuración del módulo de imagen de la imagen directamente encima del botón y establezca el margen inferior en 0px.

botones de fuente de icono

Ahora necesitamos tirar del botón hacia arriba sobre la imagen usando un valor de margen negativo personalizado igual a la altura del botón. Para hacer esto, necesitamos determinar la altura de nuestro botón. Como se mencionó anteriormente en esta publicación, con el relleno personalizado en su lugar, podemos saber el tamaño exacto de nuestro botón en función del tamaño actual del texto del botón. Dado que el tamaño del texto del botón es 20px, sabemos que la altura de nuestro botón es 3em (3 veces el tamaño del texto del botón) que es 60px. Por lo tanto, necesitamos establecer un margen personalizado para nuestro botón de la siguiente manera:

Margen personalizado: -60px superior

Y luego podemos colocar nuestro botón a la derecha ajustando la alineación del botón a la derecha.

botones de fuente de icono

Ahora que tenemos un diseño funcional para nuestra imagen y botón. Todo lo que tenemos que hacer es agregar el mismo botón a todas las imágenes de la sección.

Dado que eliminamos el margen inferior de la imagen, podemos aplicar fácilmente ese cambio a todas las imágenes de la sección utilizando Estilos extendidos. Haga clic derecho en la imagen y seleccione "Extender estilos de imagen".

botones de fuente de icono

En la ventana emergente Extender estilos, seleccione “Esta sección” para la opción Completa y haga clic en el botón extender. Ahora todas las imágenes tienen un margen inferior de 0px.

El último paso es simplemente copiar y pegar los módulos Button debajo de cada una de las imágenes.

botones de fuente de icono

Aquí está el diseño final.

botones de fuente de icono

Y debido a que utilizamos técnicas de espaciado adecuadas, el botón también permanecerá en su lugar en el dispositivo móvil …

botones de fuente de icono

Iconos disponibles mediante el módulo de botones

Dado que el texto del botón del módulo de botones se limita a los caracteres disponibles en el teclado, deberá explorar esas teclas para encontrar los iconos disponibles asociados con cada tecla. Una manera fácil de hacer esto es crear un módulo de botones con la fuente del botón configurada como Fuente elegante y escribir los caracteres en el cuadro de texto del botón.

Aquí hay una captura de pantalla de los personajes con su icono de fuente correspondiente:

botones de fuente de icono

Si encuentra que este proceso le limita, siempre puede usar un módulo de texto para crear enlaces de íconos usando los Unicodes enumerados aquí.

Pensamientos finales

El uso de Elegant Icon Font con el módulo de botones de Divi es una forma conveniente de crear botones de un solo icono para su sitio web. Esto abre algunas puertas para ser creativo con la configuración del módulo para personalizar su botón con estilos de texto únicos, efectos de desplazamiento y más. Me gustan particularmente esos valores de espaciado de botones personalizados que aseguran que los botones tomen la forma de un cuadrado o círculo perfecto.

Hay muchos usos para los botones de iconos. Con suerte, el caso de uso de ejemplo que cubrí agregará un poco de inspiración para sus propios proyectos.

Para obtener más ideas, consulte cómo utilizar el Fuente de icono elegante o cómo insertar una fuente de iconos en su sitio web.

Me encantaría incluir algunas ideas tuyas en los comentarios a continuación.

¡Salud!