Lista de ventajas con íconos (check) en HTML y CSS
Escribe un elemento por línea. Para tener título y descripción, sepáralos con |. Elige el ícono, los colores y las columnas.
Cómo usarBeneficios que se leen de un vistazo
Disponible en: 
Lista de ventajas con íconos (check) en HTML y CSS: para qué sirve
Convierte la lista de beneficios de tu producto o servicio en una lista con íconos: check, check en círculo, flecha, estrella, corazón o rayo, con o sin círculo de fondo, en una o dos columnas y con el color de la marca. Cada elemento puede tener título y descripción, separados por |.
El ícono viene del CSS, con un pequeño SVG usado como máscara y pintado por la variable --cor-icone, así que el HTML sigue siendo una lista común, que Google y los lectores de pantalla entienden, y cambiar el ícono de todos los elementos es modificar una línea.
Cómo usar
- Escribe los elementos, uno por línea.
- Elige el ícono, las columnas y el color.
- Copia el código al sitio.
Cuándo usar
- Sección de beneficios de la página de inicio.
- Lista de lo que incluye un plan.
- Página de venta de un servicio.
Preguntas frecuentes
¿Por qué el ícono va por CSS?
Porque así el HTML queda limpio, una lista común con li, y el ícono es decoración: el lector de pantalla lee solo el texto del elemento, y cambias el ícono de todos los elementos modificando una línea del CSS.
¿Cómo funciona el ícono sin imagen?
Cada elemento tiene un ::before con un pequeño SVG usado como máscara (mask-image) y pintado con el color que elegiste. Funciona en todos los navegadores actuales y el color cambia mediante la variable --cor-icone.
¿Dónde usar la lista de ventajas?
En la sección de beneficios de la página de inicio, en la descripción de un servicio, junto al precio de un plan y en páginas de venta. Comienza cada elemento por el resultado para el cliente, no por la característica.
¿Es gratis de verdad?
Sí, 100% gratis. Sin registro, sin suscripción y sin límite de uso. Todas las herramientas de Tools123 son gratuitas.