Ir a contenido principal
Nota: Este contenido se tradujo a través de un software y es posible que no haya sido revisado. La versión en inglés se considera, por tanto, la versión oficial y es posible que haya sido actualizada. Para acceder a la versión en inglés, haz clic aquí.

Insertar y editar iconos en módulos de texto enriquecido

Última actualización: junio 22, 2023

Disponible con cualquiera de las siguientes suscripciones, a no ser que se indique de otro modo:

Todos los productos y planes

Puedes añadir cualquier icono de la biblioteca Font Awesome a los módulos de texto enriquecido de las entradas y páginas del blog. Una vez que se agrega el icono, puedes personalizar su color, posicionamiento y tamaño. 

Nota: los iconos no se pueden agregar directamente a correos electrónicos de marketing. Para utilizar un icono en un correo electrónico, guarda el icono como imagen y, a continuación, inserta la imagen en el editor de correo electrónico


Añade un icono a tu contenido en un módulo de texto enriquecido

  • Ve al contenido que quieres modificar:

    • Páginas de sitio web: En tu cuenta de HubSpot, dirígete a Marketing > Sitio web > Páginas de sitio web.
    • Páginas de destino: En tu cuenta de HubSpot, dirígete a Marketing > Landing pages.
    • Artículos de blog: En tu cuenta de HubSpot, dirígete a Marketing > Sitio web > Blog.
  • Pase el ratón por encima de una página o entrada y haga clic en Editar
  • Haz clic en el módulo de texto enriquecido donde deseas que aparezca el icono.
  • En la parte superior derecha de la barra de herramientas de texto enriquecido, haz clic en el menú desplegable Insertar y selecciona Icono.

insertar-un-icono-en-un-post-o-pagina

  • En el cuadro emergente, busca el icono en la barra de búsqueda. 
  • Haz clic en el icono para insertarlo en tu módulo de texto enriquecido. 

Editar un icono

Una vez que hayas insertado tu icono, puedes editar su apariencia y posición o enlace a otros contenidos. 

  • Ve al contenido que quieres modificar:

    • Páginas de sitio web: En tu cuenta de HubSpot, dirígete a Marketing > Sitio web > Páginas de sitio web.
    • Páginas de destino: En tu cuenta de HubSpot, dirígete a Marketing > Landing pages.
    • Artículos de blog: En tu cuenta de HubSpot, dirígete a Marketing > Sitio web > Blog.
  • Pase el ratón por encima de una página o entrada y haga clic en Editar
  • En el editor de contenido, haz clic en tu icono para abrir el editor de iconos.
    • Para editar el color del icono, haz clic en el menú desplegable backgroundColor color del icono y selecciona un color . Para introducir un valor hexadecimal  o un valor de color RGB , haz clic en la pestaña Avanzado 
    • Utiliza los iconos indent sangría iconiconiconpara mover el icono hacia la derecha o hacia la izquierda.
    • Utiliza los iconos blockAlignmentBottom alineación para ajustar la posición del icono dentro de un bloque de texto. 
    • Para añadir un enlace a tu icono, haz clic en el iconolinkenlace y, a continuación, inserta un enlace.
    • Para cambiar el tamaño de tu icono, haz clic y arrastra las esquinas del icono en el editor o introduce valores en píxeles para la anchura y la altura en la barra de herramientas.
usar-el-icono-barra-de-herramientas
  • Para eliminar un icono de un módulo de texto enriquecido, haz clic en la imagen y, a continuación, en el icono de la papelera delete .
  • Para sustituir el icono, haz clic en la imagen, luego en replace sustituir icono y añade un nuevo icono.

Editar opciones de icono avanzado

Puedes editar opciones avanzadas para tu icono para agregar texto de accesibilidad o personalizar el enlace del icono. 

  • En el editor de contenido, haz clic en el icono. 
  • Haz clic en el icono de edición edit .
  • En la ventana emergente, haz clic en Avanzado.
  • Si tu icono tiene un enlace, puedes seleccionar uno o varios tipos de enlace . Esto indica a los motores de búsqueda cómo este enlace se relaciona con tu sitio web. Más información sobre diferentes tipos de enlaces.
  • Selecciona un propósito para tu imagen.
    • Si tu icono pretende transmitir información, selecciona Lectura por lectores de pantalla y añade un título que describa su finalidad.
    • Si tu icono no transmite información, selecciona Ignorado por los lectores de pantalla
  • Haz clic en Aplicar
select-an-icon-purpose-1
¿Te resultó útil este artículo?
Este formulario se utiliza solo para recibir comentarios a la documentación. Cómo recibir ayuda con HubSpot.