Usar Font Awesome en HubSpot

Font Awesome es una fuente de iconos vectoriales ampliables que se pueden personalizar según el tamaño, el color y cualquier otro atributo que se pueda cambiar con CSS. Los dos métodos más comunes de usar Font Awesome en HubSpot son:

• Usar el campo del ícono en módulos personalizados
• Usar un kit de Font Awesome

Nota: Los íconos de Font Awesome no funcionan en el correo electrónico porque la mayoría de los clientes de correo electrónico no representan las fuentes web. Para usar íconos en un correo electrónico, deberás convertir íconos en imágenes y luegoinsertar las imágenes en el editor de correo electrónico. 

Usa el campo del icono en módulos personalizados

Puedes seleccionar de iconos preinstalados de Font Awesome agregando un campo de icono a tus módulos personalizados. Para agregar un campo de icono a un módulo personalizado:

• En tu cuenta de HubSpot, dirígete a Marketing > Archivos y plantillas > Herramientas de diseño.
• Desde el buscador en la barra lateral izquierda, selecciona un módulo personalizado existente. O, crear un nuevo módulo personalizado.
• Agrega un campo de icono al módulo haciendo clic en Agregar campo en la barra lateral derecha y luego seleccionando Icono.
  
  
• Puedes personalizar el campo configurando opciones predeterminadas y opciones de editor. Más información sobre cómo personalizar los campos del módulo.
• Agrega el campo del icono al cuerpo del módulo colocando el cursor sobre el campo en la barra lateral derecha y luego haz clic en Acciones. Selecciona Copiar fragmento, pega el fragmento en la sección HTML + HUBL donde deseas que aparezca el icono.
  
  
• En la parte superior derecha, haz clic en Publicar.
• Si este es un nuevo módulo, agrega el módulo a cualquier plantilla donde desees usar los íconos. Haz clic en Publicar en la parte superior derecha para publicar los cambios de plantilla.
• Ahora puedes seleccionar íconos de Font Awesome en tu módulo personalizado, ya sea desde el administrador de diseño o el editor de páginas.
  
  

Usar un kit de Font Awesome

Puedes agregar íconos de Font Awesome en tu sitio al crear un kit de Font Awesome, agregar el código a tu HTML de encabezado y luego agregar los íconos a tu página. Más información sobre kits de Font Awesome.

• Comienza por Crear un kit en el sitio web de Font Awesome. Una vez que crees un kit, recibirás una línea de código que puedes agregar a HubSpot. El código se verá similar a:

  <script src="https://kit.fontawesome.com/xxxxxxxxxx.js" crossorigin="anonymous"></script>

• En HubSpot, pega el código del kit en el HTML de encabezado de tu sitio. Esto hará que Font Awesome esté disponible en todas las páginas, dependiendo del subdominio que elijas cuando edites el HTML de tu sitio web. Para agregar Font Awesome a una sola página, en lugar de ello, puedes crear Agregar el código de kit a HTML de una página individual.

Agrega íconos a tu página

Para agregar un ícono a una página, deberás editar tu HTML de contenido para asignar clases Font Awesome a tus elementos. En HubSpot, esto podría significar la edición de un módulo personalizado o Archivo codificado, edición de una plantilla de blog o la edición del código fuente de un módulo de texto enriquecido en el editor de páginas.

Cada ícono tiene dos partes en la declaración:

• El nombre del ícono, con el prefijo fa-. Por ejemplo: fa-camera
• El prefijo de estilo. Por ejemplo, fas. 

Para los íconos de marca, como Facebook, deberás usar el prefijo de estilo fab. Por ejemplo:

class="fab fa-facebook"

Puedes usar un elemento <i> <span> al insertar los íconos. En el siguiente ejemplo, ambos métodos funcionan:

<i class="fas fa-camera"></i>
<span class="fas fa-camera"></span>

Más información sobre cómo usar los íconos de Font Awesome en tu contenido.

Íconos de Font Awesome alojados en HubSpot