Usar Font Awesome en HubSpot
Última actualización: octubre 19, 2020
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
adjust anchor archive arrows arrows-h arrows-v asterisk ban bar-chart-o barcode bars beer bell bell-o bolt book bookmark bookmark-o briefcase bug building-o bullhorn bullseye calendar calendar-o camera camera-retro caret-square-o-down caret-square-o-left caret-square-o-right caret-square-o-up certificate check check-circle check-circle-o check-square check-square-o circle circle-o clock-o cloud cloud-download cloud-upload code code-fork coffee cog cogs comment comment-o comments comments-o compass credit-card crop crosshairs cutlery dashboard (alias) desktop dot-circle-o download edit (alias) ellipsis-h ellipsis-v envelope envelope-o eraser exchange exclamation exclamation-circle exclamation-triangle external-link external-link-square eye eye-slash female fighter-jet film |
filter |
quote-right random refresh reply reply-all retweet road rocket rss rss-square search search-minus search-plus share share-square share-square-o shield shopping-cart sign-in sign-out signal sitemap smile-o sort sort-alpha-asc sort-alpha-desc sort-amount-asc sort-amount-desc sort-asc sort-desc sort-down (alias) sort-numeric-asc sort-numeric-desc sort-up (alias) spinner square square-o star star-half star-half-empty (alias) star-half-full (alias) star-half-o star-o subscript suitcase sun-o superscript tablet tachometer tag tags tasks terminal thumb-tack thumbs-down thumbs-o-down thumbs-o-up thumbs-up ticket times times-circle times-circle-o tint toggle-down (alias) toggle-left (alias) toggle-right (alias) toggle-up (alias) trash-o trophy truck umbrella unlock unlock-alt unsorted (alias) upload user users video-camera |
volume-down volume-off volume-up warning (alias) wheelchair wrench check-square check-square-o circle circle-o dot-circle-o minus-square minus-square-o plus-square plus-square-o square square-o bitcoin (alias) btc cny (alias) dollar (alias) eur euro (alias) gbp inr jpy krw money rmb (alias) rouble (alias) rub ruble (alias) rupee (alias) try turkish-lira (alias) usd won (alias) yen (alias) angle-double-down angle-double-left angle-double-right angle-double-up angle-down angle-left angle-right angle-up arrow-circle-down arrow-circle-left arrow-circle-o-down arrow-circle-o-left arrow-circle-o-right arrow-circle-o-up arrow-circle-right arrow-circle-up arrow-down arrow-left arrow-right arrow-up arrows arrows-alt arrows-h arrows-v caret-down caret-left caret-right caret-square-o-down caret-square-o-left caret-square-o-right caret-square-o-up caret-up chevron-circle-down chevron-circle-left chevron-circle-right chevron-circle-up |
chevron-down chevron-left chevron-right chevron-up hand-o-down hand-o-left hand-o-right hand-o-up long-arrow-down long-arrow-left long-arrow-right long-arrow-up toggle-down (alias) toggle-left (alias) toggle-right (alias) toggle-up (alias) arrows-alt backward compress eject expand fast-backward fast-forward forward pause play play-circle play-circle-o step-backward step-forward stop youtube-play adn android apple bitbucket bitbucket-square bitcoin (alias) btc css3 dribbble dropbox facebook-square flickr foursquare github github-alt github-square gittip google-plus google-plus-square html5 linkedin-square linux maxcdn pagelines pinterest-square renren skype stack-exchange stack-overflow trello tumblr tumblr-square twitter-square vimeo-square vk windows xing-square youtube youtube-play youtube-square |
Contenido relacionado
-
Crear plantillas para páginas, correos electrónicos y blogs con el editor de diseños
Usa el creador de plantillas de HubSpot para hacer plantillas con los módulos de una interfaz en la que solo...
Base de conocimientos -
Crear y editar módulos
En la herramienta del administrador de diseño, puedes crear módulos con código personalizado para agregar...
Base de conocimientos -
Personalizar tu contenido
Con fichas de personalización, puedes mostrar contenido personalizado a tus contactos según sus valores de...
Base de conocimientos