Icono Plantillas CSS

Plantillas CSS de iconos funcionales estilizadas para tarjetas y controles clicables

Cada icono conlleva una serie de decisiones discretas: su tamaño, la forma que lleva detrás y qué ocurre cuando el puntero pasa sobre él. Las plantillas CSS de iconos incluyen esas decisiones ya resueltas. Los bloques abarcan desde tarjetas de servicios y filas de contacto hasta botones con iconos. El uso de clases compartidas da estilo a cada elemento de un grupo de forma coherente, por lo que una nueva tarjeta adopta automáticamente el mismo tamaño y color.

Reglas integradas en tarjetas típicas

Los bloques de esta categoría suelen incluir reglas como las siguientes:

1. una misma anchura y altura para cada icono del grupo, para que ninguno parezca involuntariamente más grande;
2. un círculo con relleno o borde detrás del símbolo, o bien un cuadrado con esquinas redondeadas;
3. una separación fija entre el icono y su encabezado que mantiene las filas alineadas cuando los títulos ocupan varias líneas;
4. un color de acento vinculado a la paleta del tema, de manera que todo el conjunto cambie conjuntamente.

Estas reglas son válidas tanto para iconos SVG como para glifos de fuentes de iconos. En una fila de contacto, todos los iconos de canales comparten el mismo tamaño. La línea de correo electrónico puede llevar un acento más destacado si es su canal principal. El grosor de la línea también importa, ya que los iconos de trazo fino pierden visibilidad en pantallas de teléfonos mucho antes que los rellenos.

Celdas repetidas y estados clicables

En Nicepage, el elemento Grid Repeater Element repite el diseño y el estilo de sus celdas. Cada columna conserva su propio icono y texto. Cambie el color del círculo en una celda y el resto se actualizará en sintonía. Una cuadrícula de servicios estática rara vez necesita más. Los iconos clicables para buscar, compartir o cerrar un panel son distintos, y la plantilla debe definir estos estados:

1. una apariencia predeterminada sobria junto al texto circundante;
2. un estado hover que varía el color o el fondo cuando el puntero se sitúa encima;
3. un estado activo o de foco para el propio clic y para los usuarios que navegan con teclado;
4. un estado resaltado que marca la opción actual, como un filtro seleccionado.

Cambiar el color de grupos enteros al mismo tiempo

Mediante los colores del tema en la configuración del sitio de Nicepage, cambiar un acento actualiza cada icono que lo utiliza en todas las páginas del proyecto. Es preferible dejar fuera de ese acento los símbolos de advertencia y confirmación, igualando su tamaño al de sus vecinos y aplicando su propio color. Los tamaños también pueden variar según el modo responsive, de modo que un símbolo decorativo grande se reduzca en dispositivos móviles. Cuando los controles visuales no sean suficientes, Custom CSS Code permite añadir una regla a un único elemento, a una sola página o a todo el sitio.

Una plantilla de cuadrícula de servicios puede funcionar perfectamente con un único estilo de icono estático. En botones y selectores, revise los estados antes que la paleta, ya que un control que no reacciona al clic da la impresión de no funcionar.