Saltar al contenido

Cómo añadir Font Awesome en Divi (2019)

Cómo añadir Font Awesome en Divi (2019)
5 (100%) 1 vote[s]

32uKuBR

Font Awesome es el juego de herramientas de iconos más popular de la web. Con miles de iconos gratuitos y de primera calidad, es fácil entender por qué son tan populares.

Afortunadamente, los iconos Font Awesome son fáciles de usar con Divi. En este artículo, veremos lo fácil que es añadir manualmente Font Awesome a Divi. Si prefieres añadir más iconos a Divi usando un plugin, echa un vistazo a nuestro blog sobre cómo añadir más iconos a Divi.

Adición de Font Awesome a los divisores mediante el uso de código

Una de las ventajas de Font Awesome es que sus iconos se sirven a través de una CDN. La manera más fácil de integrar la CDN de Font Awesome directamente en Divi sin usar un plugin es incrustar el código en el encabezado de Divi. A continuación, puede incrustar los iconos de Font Awesome en el cuerpo de su sitio web con HTML.

Primero, vaya a la página de inicio de Font Awesome y comience un nuevo proyecto. Aquí puede elegir los tipos de iconos que desea utilizar con su sitio web. De forma predeterminada, se seleccionan todos los iconos de Webfont gratuitos. También puede elegir entre pro, sólido, regular, marcas o SVG. Copie el código. Pegarás esto en Divi.

En el panel de control de WordPress, vaya a Divi > Opciones de tema y seleccione la pestaña Integración. Asegúrese de que el código del encabezado esté habilitado y péguelo en el cuadro de código. Font Awesome está ahora habilitado y listo para usar dentro de su contenido Divi.

Agregar el código de Font Awesome al contenido

Ahora puedes usar los fragmentos de código de icono dentro del texto de tu sitio web de Divi. También puedes cambiarles el estilo (Font Awesome proporciona un código de ejemplo para que empieces). En primer lugar, busque los iconos que desea incrustar en el contenido. Filtra los iconos por las selecciones que hiciste al incrustar el código en el encabezado de Divi para hacerlos más fáciles de buscar.

Haga clic en el icono para ver las opciones y el código. Haga cualquier selección que desee para obtener el icono exacto para sus necesidades y luego haga clic en el HTML bajo el nombre del icono. Esto copiará el código en su portapapeles.

Pegue el código dentro de su contenido. En este ejemplo, he añadido el código dentro de las etiquetas h2 de un título dentro de un módulo de texto. Puedes añadirlos a cualquier módulo o widget que tome código y darle estilo en línea o con la configuración del módulo.

Aquí está el ícono estilizado dentro del texto. He estilizado el tamaño y el color de la fuente. Moví el palmo para indicar dónde debe terminar el estilo. He incluido las primeras frases del texto, pero eso puede ser excluido con otro lapso.

Este excluye el texto, permitiéndole usar su propio estilo.

En este caso, coloqué el intervalo después de la primera palabra para ver cómo funciona el icono de Font Awesome con el texto.

Para este ejemplo, he reemplazado imágenes en el diseño de Divi App Developer con iconos de Font Awesome. He añadido los iconos a los módulos de texto. He ajustado el tamaño y estilizado cada uno con un color diferente usando el código en el texto.

También es posible cambiarles el estilo utilizando la configuración del módulo. El icono funciona como una fuente, por lo que puede cambiar el estilo de la misma forma en que lo haría con el texto en el módulo de texto. En este ejemplo, he aumentado el tamaño de la fuente, cambiado el color, añadido al relleno a la izquierda y añadido sombra de texto.

Aquí está el diseño después de pegar los estilos en los otros tres módulos de texto y personalizar los colores para cada módulo.

Adición de código Font Awesome a los widgets

Puede añadir el código a cualquier widget que utilice texto o HTML. Aquí, lo he añadido a un widget HTML personalizado.

Éste usa el mismo código en un widget de Texto.

Aquí están los dos widgets que muestran el icono.

El widget HTML permite estilizar en código.

El widget de texto también permite el estilo en línea usando la pestaña de texto.

Aquí están mis ejemplos con su estilo. Al igual que cualquier texto de un widget, también puedes darle un estilo global con el personalizador de temas.

Adición de un código de Font Awesome a los menús

Hay al menos dos maneras fáciles de utilizar el código en el menú: en la etiqueta de navegación o en la clase CSS. Para la clase CSS, pegue la parte de clase del código en el campo Clases CSS en el elemento de menú al que desea adjuntarlo. En este caso, es la parte de»fas fa-anchor» del código.

Nota – Si las clases CSS no están habilitadas, seleccione Opciones de pantalla en la parte superior de la pantalla y haga clic en Clases CSS en Mostrar propiedades de menú avanzadas.

El icono se ve aquí encima del enlace ACERCA DE. Puede añadir iconos a cada elemento del menú y utilizar el personalizador de temas para cambiar el estilo de todo el menú. Si desea cambiar el estilo de cada uno de ellos de forma independiente, deberá pegar el código en la etiqueta de navegación.

Coloque el código antes o después del nombre que desea que aparezca en el menú.

Aquí están mis íconos de fuentes en el menú. Cada icono tiene su propio estilo. Esta es una manera fácil de añadir iconos al menú y darle estilo.

Pensamientos finales

Esa es nuestra Font Awesome, es un gran recurso para los iconos y, al añadir el código Font Awesome a la cabecera Divi, son fáciles de usar con Divi. Úsalos en tu contenido, widgets y menús, y dale estilo manualmente o dentro de la configuración del módulo Divi.

Si quieres añadir aún más iconos a Divi, echa un vistazo al artículo Cómo añadir más iconos a Divi.

Queremos saber de ti. ¿Has añadido iconos de Font Awesome a Divi usando este método? Háganos saber su experiencia en los comentarios que aparecen a continuación