Tutorial: Usar iconos personalizados de Font Awesome en Divi sin plugins

Inicio / Blog / Snippets / Tutorial: Usar iconos personalizados de Font Awesome en Divi sin plugins

Autor: Jefferson M

Publicación: 23 Jun, 2020

¡Hola DiviFans! en este tutorial de WordPress les enseñaré a usar iconos personalizados de Font awesome en Divi sin plugins, simplemente logrando una conexión entre ambas plataformas de manera muy muy sencilla.

Tiempo de lectura estimado: 3 minutos

Índice

En este tutorial usaremos recursos como el Theme Builder de Divi, y lograremos aprender a importar iconos directamente en cualquier parte que queramos dentro de nuestro diseño web hecho con Divi.

Preview

Al terminar el tutorial, podrás conseguir un resultado como este:

¿Cómo importamos iconos personalizados de Font awesome en Divi sin plugins?

Lo primero que debemos hacer es entrar en la plataforma https://fontawesome.com/ y comenzar el proceso de registro en su página principal. Existe una versión gratuita donde podemos crear un kit de iconos, pero con este nos basta y sobra para comenzar:

Una vez que comencemos nos va a pedir un correo al que nos enviarán un email de confirmación, es importante que éste correo lo tengas activo porque te servirá para logearte a la plataforma cada vez que quieras usar un icono.

Una vez que revisemos nuestro correo y clickemos en el enlace de confirmar correo, podremos empezar a utilizar nuestro primer kit. Una vez accedemos a Font Awesome nos pedirá registrar una contraseña, y luego nos enviará a la página del kit para conectar con nuestro sitio web.

Ya en esa página, debemos copiar el pequeño script que nos generará la misma nuestro Divi, para lograrlo, debemos hacer unos simpletos pasos.

Copiamos el script y lo pegamos en Divi → opciones de tema → Integración → código de head del blog. De hecho se te hará muy familiar porque es el mismo lugar donde pegamos el código de seguimiento de Google analytics.

Una vez que este colocado, guardamos cambios y podremos empezar a usar font awesome en nuestro sitio web. Para ver como lo integramos con Divi, puedes mirar el video tutorial donde lo explicamos a detalle.

Conclusiones

Conectar font awesome con Divi puede resultar muy excelente para dar un diseño genial con iconos personalizamos dentro de Divi. Recuerda que tenemos también dos tutoriales premium donde te enseñamos a usar más de 2600 iconos personalizados dentro de Divi con un plugin, y donde te enseñamos a colocar iconos personalizamos en la cabecera y el footer de tu sitio web hecho con Divi.

¡Nos gustaría saber qué piensas! ¿Te pareció sencillo hacer la integración? Déjanos tus opiniones en la parte inferior de este post.

¡Muchas gracias! ¡No olvides compartir este contenido en tus redes sociales!

Nos vemos el el proximo video tutorial.

4 Comentarios

  1. Patricio Gómez

    Me parece genial, en especial el uso de iconos en el menú. Pero tengo algunas dudas. Se puede hacer esto mismo con algún plugin de los hay en los recursos de la zona de miembros, en especial el mismo uso y resultado en menú??
    Lo otro es que al crear el kit en la página y con cuenta free, No estamos sujetos a protección de ningún tipo, frente a cambios en políticas de la pagina que nos protejan y puedan por ejemplo eliminarse o cambiarse algunos de los iconos ya elegidos y usados. Eso podría dañar o alterar la interface de esta. Por lo demás al crearse el kit en la pagina, si se hacen llamados a esta con el correspondiente uso de recursos, aunque tal vez serian los mismos que podría usar un plugin. Estoy en lo correcto o nada que ver??

    Responder
    • Jefferson M

      Hola Patricio, excelentes preguntas! Te respondo: Los plugins de iconos de la zona premium dan otras funcionalidades como insertar iconos de redes sociales adicionales en la cabecera o el footer, o insertar iconos dentro de la librería de iconos del Divi Builder, así que este post es más bien como un complemento gratuito a esos tutoriales, pero no tienen la misma funcionalidad.
      Por otro lado, al usar cualquier servicio de terceros, siempre estaremos sujetos a sus políticas, sobre todo si el servicio es gratuito, como es el caso de font awesome. La buena noticia es que estos servicios son muy estables, y difícilmente nos veremos perjudicados en algún momento por el mismo. Para cualquier otra duda, por acá estamos.

      Responder
  2. Manfred Camero Garcia

    Hola Jefferson buen dia.
    Respecto a este tutorial, tengo una consulta, quiero ingresar el script de Font Awesome en el header de una sola pagina para una Landing Page y no de todo el sitio porque los iconos de Font Awesome solo los utilizare en la Landing Page.
    ¿Sabes si se puede a través de DIVI insertar manualmente el script así como se hace en las opciones generales con el tema?
    Gracias de antemano por tu ayuda, saludos!!

    Responder
    • Jefferson M

      Hola Manfred, claro que si. Intenta colocar el Script dentro de los códigos: …Aquí va el script… (sin los espacios) y este código completo lo metes dentro de un módulo de código en la página que quieras desplegar. Nota: no lo he probado, pero otros script funcionan así, si te funciona me avisas.

      Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Solicitud de cancelación de suscripción

Aviso importe

🚩 Debes solicitar la cancelación de tu suscripción al menos 24 horas antes de tu renovación, de otro modo, no podremos procesar a tiempo la cancelación antes de tu renovación.

Al cancelar tu suscripción, perderás el acceso a todo esto:

🚩 A más de mil contenidos especializados en el aprendizaje del diseño web
🚩 El soporte personalizado en Divi
🚩 Acceso al grupo de Discord
🚩 Acceso a la descarga de las actualizaciones de los plugins, el contenido y las descargas de nuestro sitio.
🚩 Puntos y rangos obtenidos en la plataforma

✅ Te ofrecemos la opción de pausar tu suscripción 2 o 3 meses y así no perderás el progreso obtenido en la plataforma.

Lamentamos mucho 😩 que tu experiencia en nuestra plataforma no haya sido la mejor. Para poder procesar tu solicitud y hacerla efectiva, necesitaremos que por favor nos envíes lleno este formato. Esto nos ayudará a poder seguir mejorando nuestra propuesta de valor y siendo útil para todos los usuarios.

Solicitud de cancelación

¿Por cuál o cuáles razones deseas cancelar tu suscripción?

¿Qué características mejorarías en nuestra web?

¿Cuál es tu nivel de satisfacción en relación con la calidad del soporte que ofrecemos por diferentes medios? donde 1 es insatisfecho y 5 es satisfecho

¿En esta escala que tanto recomendarías a UXDIVI a un amigo o colega? donde 1 es "no lo recomendaría" y 5 es "Lo recomendaría totalmente"

1 + 1 =


Iniciar Sesión

¿No tienes cuenta? Registrarse

Otros planes

¡Accede a más de 1330 contenidos especializados en Diseño Web con Divi por un solo precio!

Trimestral

Ahorra 6 USD 🔥

$US 18/ Mes

*Pagando US$ 54 cada 3 meses

¿A qué accedes con este plan?

Lifetime

Un solo pago 🔥

$US 499/ Lifetime

*UN SOLO PAGO DE POR VIDA

¿A qué accedes con este plan?

Con este plan accedes a:

  1. ✅ Todos los cursos
  2. ✅ Todos los tutoriales prémium
  3. ✅ Todos los plugins y layouts
  4. ✅ Soporte prémium vía email
  5. ✅ Acceso a la comunidad en Discord

Con este plan accedes a:

  1. ✅ Todos los cursos
  2. ✅ Todos los tutoriales prémium
  3. ✅ Todos los plugins y layouts
  4. ✅ Soporte prémium vía email
  5. ✅ Acceso a la comunidad en Discord
  6. ✅ Descuentos en Templates para Divi