/** * icons.css — Reemplaza Font Awesome CDN (18.6 KB) para F3 Construction * Solo contiene las reglas necesarias para los 15 iconos usados en el sitio. * Tamaño: ~1 KB vs 18.6 KB original (ahorro: 18.4 KB, 99%) * * Estrategia: SVG sprite inline → no requiere woff2 ni CSS externo. * El sprite se inyecta en el via fa-icons.php → fa_sprite(). */ /* ── Base SVG icon ────────────────────────────────────────────────────── */ .icon { display: inline-block; width: 1em; height: 1em; /* Hereda el color del texto padre — igual que FA icon fonts */ fill: currentColor; /* Alineación vertical idéntica a FA icon fonts */ vertical-align: -0.125em; /* Sin selección de texto (igual que FA) */ overflow: hidden; pointer-events: none; } /* ── Variantes de tamaño — misma API que FA ──────────────────────────── */ .icon-xs { font-size: 0.75em; } .icon-sm { font-size: 0.875em; } .icon-lg { font-size: 1.25em; } .icon-xl { font-size: 1.5em; } .icon-2x { font-size: 2em; } .icon-3x { font-size: 3em; } /* ── Rotación y animación ────────────────────────────────────────────── */ .icon-spin { animation: icon-spin 1.5s linear infinite; } @keyframes icon-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ── Accesibilidad: ocultar del accessibility tree cuando es decorativo */ /* (el sprite ya tiene aria-hidden="true" por defecto en fa()) */ .icon[aria-hidden="true"] { pointer-events: none; } /* ── Compatibilidad: reglas para los con clases FA que aún existan ─ */ /* Esto permite una transición gradual sin romper las páginas internas */ /* que aún usan