FontAwesome implementa el media query [`prefers-reduced-motion`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) > La función multimedia CSS de `prefers-reduced-motion` se utiliza para detectar si el usuario ha solicitado que el sistema minimice la cantidad de movimiento no esencial que utiliza. El mismo esta definido así: ```CSS @media (prefers-reduced-motion:reduce) { .fa-beat,.fa-beat-fade,.fa-bounce,.fa-fade,.fa-flip,.fa-pulse,.fa-shake,.fa-spin,.fa-spin-pulse { -webkit-animation-delay: -1ms; animation-delay: -1ms; -webkit-animation-duration: 1ms; animation-duration: 1ms; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; transition-delay: 0s; transition-duration: 0s } } ``` ## Solución: Existen 2 opciones: 1. Borrar dicha implementación del archivo CSS 2. Pisarla ### Ejemplo: <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-html --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <style> @media (prefers-reduced-motion:reduce) { .fa-beat,.fa-beat-fade,.fa-bounce,.fa-fade,.fa-flip,.fa-pulse,.fa-shake,.fa-spin,.fa-spin-pulse { -webkit-animation-delay: var(--fa-animation-delay, 0); animation-delay: var(--fa-animation-delay, 0); -webkit-animation-duration: var(--fa-animation-duration, 2s); animation-duration: var(--fa-animation-duration, 2s); -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite); animation-iteration-count: var(--fa-animation-iteration-count, infinite); } } </style> <div class="row text-center"> <div class="col fa-3x"> <i class="fa-solid fa-spinner fa-spin"></i> </div> </div> <!-- end snippet -->