/** * Global Icons System - Medifolios * Font Awesome 5 (Free) - Helper Classes y Estilos * * Este archivo contiene SOLO las clases helper para iconos. * Font Awesome 5 debe cargarse directamente en el de cada página: * * * * Font Awesome 5 Free includes: * - fas (Solid) - Most common icons * - far (Regular) - Outline versions * - fab (Brands) - Social media and brand icons */ /* ============================================ NOTA IMPORTANTE: Este archivo NO carga Font Awesome. Solo contiene helper classes (tamaños, colores, animaciones). ============================================ */ /* ============================================ ICON HELPER CLASSES ============================================ */ /* Icon sizes for consistent sizing across platform */ .icon-xs { font-size: 0.75rem; } .icon-sm { font-size: 1rem; } .icon-md { font-size: 1.5rem; } .icon-lg { font-size: 2rem; } .icon-xl { font-size: 3rem; } .icon-2xl { font-size: 4rem; } /* Icon spacing */ .icon-mr-sm { margin-right: 0.5rem; } .icon-mr-md { margin-right: 0.75rem; } .icon-mr-lg { margin-right: 1rem; } .icon-ml-sm { margin-left: 0.5rem; } .icon-ml-md { margin-left: 0.75rem; } .icon-ml-lg { margin-left: 1rem; } /* Icon colors - matches Medifolios brand */ .icon-primary { color: #FFA320; } .icon-secondary { color: #1a1a2e; } .icon-white { color: #ffffff; } .icon-muted { color: #6c757d; } .icon-success { color: #28a745; } .icon-danger { color: #dc3545; } .icon-warning { color: #ffc107; } .icon-info { color: #17a2b8; } /* Icon animations */ .icon-spin { animation: fa-spin 2s infinite linear; } .icon-pulse { animation: fa-spin 1s infinite steps(8); } @keyframes fa-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Icon hover effects */ .icon-hover-grow { transition: transform 0.3s ease; } .icon-hover-grow:hover { transform: scale(1.2); } .icon-hover-rotate { transition: transform 0.3s ease; } .icon-hover-rotate:hover { transform: rotate(360deg); } /* Icon in buttons */ .btn i, .btn-primary i, .btn-secondary i, .article-read-btn i { margin-right: 8px; vertical-align: middle; } /* ============================================ COMMON ICON MAPPINGS Font Awesome 4 → Font Awesome 5 Migration ============================================ */ /* MIGRATION GUIDE: ================ Font Awesome 4 → Font Awesome 5 changes: 1. Prefix changes: - fa fa-icon → fas fa-icon (solid icons) - fa fa-icon-o → far fa-icon (regular/outline icons) - fa fa-brand → fab fa-brand (brand icons like WhatsApp, Facebook) 2. Icon name changes: - fa-calendar-check-o → fas fa-calendar-check - fa-whatsapp → fab fa-whatsapp (note: fab not fa) - fa-remove → fas fa-times - fa-close → fas fa-times - fa-gear → fas fa-cog 3. Common icons used in Medifolios: - Calendar: fas fa-calendar-check - WhatsApp: fab fa-whatsapp - Phone: fas fa-phone - Email: fas fa-envelope - User: fas fa-user - Medical: fas fa-user-md - Hospital: fas fa-hospital - Stethoscope: fas fa-stethoscope - File Medical: fas fa-file-medical - Pills: fas fa-pills - Heartbeat: fas fa-heartbeat - Ambulance: fas fa-ambulance - Check: fas fa-check - Times: fas fa-times - Arrow Right: fas fa-arrow-right - Arrow Left: fas fa-arrow-left - Bars (Menu): fas fa-bars - Search: fas fa-search - Filter: fas fa-filter - Download: fas fa-download - Upload: fas fa-upload - Print: fas fa-print - Share: fas fa-share-alt - Clock: fas fa-clock - Map Marker: fas fa-map-marker-alt - Star: fas fa-star - Money: fas fa-money-bill-wave */ /* ============================================ BRAND ICONS (Social Media) ============================================ */ .fa-whatsapp { color: #25D366; } .fa-facebook { color: #1877F2; } .fa-twitter { color: #1DA1F2; } .fa-instagram { color: #E4405F; } .fa-linkedin { color: #0A66C2; } .fa-youtube { color: #FF0000; } /* ============================================ MEDICAL ICONS (Healthcare specific) ============================================ */ .medical-icon { color: #FFA320; font-size: 2.5rem; margin-bottom: 1rem; } .feature-icon { color: #FFA320; font-size: 2rem; margin-bottom: 0.5rem; } /* ============================================ RESPONSIVE ICON SIZES ============================================ */ @media (max-width: 768px) { .icon-xl { font-size: 2rem; } .icon-2xl { font-size: 2.5rem; } .medical-icon { font-size: 2rem; } .feature-icon { font-size: 1.5rem; } } /* ============================================ ACCESSIBILITY ============================================ */ i[aria-hidden="true"] { /* Screen readers will ignore these decorative icons */ speak: none; } /* For icons that convey meaning, ensure text alternative exists */ .icon-with-text { display: inline-flex; align-items: center; gap: 0.5rem; }