Widgets: Icon

Categorías de widgets: Básico

Elige entre una biblioteca de más de 1000 iconos ya hechos o sube tu propio archivo SVG. Puedes cambiar el color del icono, el hover, el fondo, el borde y más. Usa iconos para resaltar tu texto y equilibrar el layout de tu sitio.

Si quieres saber cómo añadir widgets, consulta «Add Widgets».

Consejo: encontrarás más información sobre los widgets y la biblioteca de widgets en «Widgets: Library and Overview».

Nota:

• Los archivos SVG se pueden redimensionar sin perder resolución.
• Los SVG son archivos de imagen que contienen código HTML, así que, cada vez que añades un icono SVG a tu sitio, añades también líneas de código. Varios SVG complejos pueden sumar miles de líneas y ralentizar la carga de tu sitio. Si necesitas usar varios iconos SVG en la misma página, te recomendamos convertir algunos en imágenes normales (.png, .jpeg, etc.) para evitar problemas de carga o de funcionamiento.

Editor de contenido

Haz clic en el elemento para abrir el menú flotante y luego en la opción del editor de contenido.

1. Haz clic en Elegir icono para elegir un icono ya hecho, o en Cargar archivo SVG.
2. Para enlazar el icono, haz clic en Icono de enlace y elige la página a la que quieres enlazarlo.
3. Escribe un texto alternativo (Alt text) para el icono. El texto alternativo ayuda a los buscadores a reconocer el contenido de la imagen. Usa un texto que describa la imagen con claridad.
4. Escribe un tooltip para el icono. El texto del tooltip aparece cuando un usuario pasa el ratón por encima de la imagen.

Editor de diseño

Haz clic en el elemento para abrir el menú flotante y luego en la opción para editar el diseño.

En el editor de diseño cambias el layout de tu icono, ajustas su tamaño y color y modificas el espaciado del widget.

Para convertir el icono en un widget flotante, activa la opción Flotante y elige una posición para el widget. Para que el botón flotante aparezca solo en la página actual, activa la opción Mostrar solo en esta página.

Nota: los iconos flotantes se pueden configurar para que aparezcan en páginas concretas, pero por defecto aparecen en todas (por ahora no hay forma de desactivarlos solo en algunas páginas).

Si quieres información sobre opciones de diseño que no son específicas de este widget (por ejemplo, layout, estilo o espaciado), consulta «Widget Design».

Preguntas frecuentes y solución de problemas

¿Por qué no cambia el color del icono cuando elijo un color distinto?

Suele deberse a cómo se creó el archivo originalmente. El color del icono debe ser negro puro (por ejemplo, el código hexadecimal #000000).

Además, el SVG debe exportarse con estilo en línea (inline).

Como los archivos SVG pueden tener un código complejo, te recomendamos consultar con alguien con experiencia en SVG para cualquier ajuste.