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. Hay dos maneras de usar Font Awesome en HubSpot:
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.
Instalar y usar Font Awesome manualmente
Para instalar Font Awesome en HubSpot, debes sentirte cómodo editando las hojas de estilo en tu sitio. Para instalar y usar Font Awesome manualmente en HubSpot, primero tendrás que cargar Font Awesome a tu administrador de archivos, y luego actualizar la fecha en la que los elementos HTML usarán las clases de Font Awesome.
Carga Font Awesome a tu administrador de archivos
- Descarga la versión de Font Awesome que te gustaría usar en HubSpot desde http://fontawesome.io/ y descomprime la carpeta en tu computadora.
- Abre el archivo font-awesome.css y copia su contenido.
- Pega el contenido de este archivo en una hoja de estilo en HubSpot.
- Abre una nueva pestaña en tu navegador para acceder a tu administrador de archivos. En tu cuenta de HubSpot, dirígete a Marketing > Archivos y plantillas > Archivos.Aquí, deberás cargar todos los archivos de fuente de Font Awesome que se mencionan en la sección Ruta de fuentes de la CSS de Font Awesome.
- Cuando hayas cargado estos archivos a tu administrador de archivos de HubSpot, copia las URL de cada archivo y reemplaza todos los enlaces relacionados en tu CSS con la URL correspondiente de cada archivo en el administrador de archivos. En tu código se verá algo como esto, salvo las URL que copiaste de tu administrador de archivos:
/* FONT PATH
* -------------------------- */
@font-face {
font-family: 'FontAwesome';
src: url('https://cdn2.hubspot.net/hubfs/HUBID/fontawesome-webfont.eot?v=4.7.0');
src: url('https://cdn2.hubspot.net/hubfs/HUBID/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('https://cdn2.hubspot.net/hubfs/HUBID/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('https://cdn2.hubspot.net/hubfs/HUBID/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('https://cdn2.hubspot.net/hubfs/HUBID/Font-awesome/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('https://cdn2.hubspot.net/hubfs/HUBID/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
- Haz clic en Publicar cambios en tu hoja de estilo cuando se reemplazan todas las URL relativas.
Usar Font Awesome
Una vez que hayas hecho referencia a la versión alojada en HubSpot de Font Awesome o cargues tus propios archivos a tu portal, estarás listo para usar Font Awesome en tu contenido. Font Awesome se aplicará a elementos con class="fa" y una clase específica del ícono que te gustaría mostrar.
Por ejemplo:
clase = "fa fa-facebook"
Nota que los iconos de Font Awesome no funcionan en el correo electrónico. Además, nota que los elementos no se pueden usar con el código fuente de los editores WYSIWYG de HubSpot. Al implementar los iconos de Font Awesome, es mejor usar etiquetas como se indica en el ejemplo a continuación:
Ejemplo de íconos de Font Awesome
- Ícono de Twitter
- Ícono de lista
- Ícono de cámara
Í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 |
Nota: la versión de Font Awesome alojada en HubSpot no se mantiene actualizada. Si quieres usar iconos más recientes, deberás cargar tus propios archivos de fuentes en tu administrador de archivos y reemplazar la referencia @font-face con su src