COS-General

Cómo instalar Font Awesome

Última actualización: March 8, 2016

Font Awesome es una fuente de íconos vectoriales escalables que puede personalizarse por tamaño, color y cualquier atributo que se pueda cambiar con CSS. Realiza estos pasos para instalar Font Awesome en el COS:

  • Copia todo el código de este archivo font-awesome alojado en HubSpot. Asegúrate de seleccionar todo el código.
  • Pega el código en tu archivo CSS. Para ser más específicos, navega hasta Contenido > Administrador de diseño, busca y accede a tu hoja de estilo, pega el código que acabas de copiar en el Paso 1 en tu hoja de estilo y guardarla correctamente.
  • Publica tu archivo CSS.

¡Ya estás listo para usar Font Awesome! Font Awesome se aplicará a los elementos con class="fa" y una clase específica del ícono que te gustaría representar (ejemplo: class="fa-facebook"). Ten en cuenta que los íconos de Font-Awesome no funcionarán en el correo electrónico.

Además, ten en cuenta que los elementos <i class=...> no se pueden utilizar con el Código fuente de nuestros editores WYSIWYG. Cuando intentes aplicar los íconos de Font Awesome, lo mejor es utilizar las etiquetas <span>, tal como se muestra en el siguiente ejemplo:

<h2>Font Awesome Icons Example</h2>
<ul class="fa-ul">
<li><span class="fa-twitter fa"></span>Twitter Icon</li>
<li><span class="fa-list-ul fa"></span>List Icon</li>
<li><span class="fa fa-camera-retro fa-lg fa"></span>Camera Icon</li>
</ul>

Si usas el Hubtheme predeterminado de HubSpot, Font Awesome ya está incluida en hubtheme-foundation.css y puedes utilizar los códigos cortos descritos en este artículo para representar los íconos de la fuente. Ten en cuenta que los códigos cortos solo están disponibles en Hubtheme (requieren un archivo javascript especial).

Alternativa a los pasos 1-3

Como una alternativa a copiar el código de font-awesome en tu archivo CSS existente, podrías agregar la siguiente etiqueta de enlace a la etiqueta del encabezado de la sección Configuración de contenido o HTML de la etiqueta del encabezado de la plantilla:

<link href="http://designers.hubspot.com/hs-fs/hub/327485/file-2054199286-css/font-awesome.css" rel="stylesheet">

Ten en cuenta que la versión Font Awesome alojada en HubSpot no se mantiene actualizada. Si deseas utilizar los íconos más nuevos que no se indican aquí, deberás cargar tus propios archivos de fuente en el Administrador de archivos y reemplaza la referencia de @font-face con sus URL src.

Artículos relacionados: