Usar JavaScript para alternar dinámicamente los íconos de Font Awesome no devuelve el ícono original.
Tengo un botón que se ve así:
<button class="btn btn-sm btn-xs-block btn-success" :data-lane-id="items[0].lane.id" type="button" v-on:click="callNextCustomer(items[0].lane.id)" :class="hasMorePeople(items)">
Siguiente Cliente <i class="fas fa-bell"></i>
</button>
Cuando se presiona el botón, la función callNextCustomer
ejecuta lo siguiente:
const spinnerIcon = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>';
var button = document.querySelectorAll('button[data-lane-id="'+lane_id+'"]');
button[0].disabled = true;
button[0].innerHTML = 'Siguiente Cliente ' + spinnerIcon;
// ejecutar una solicitud externa usando una promesa
// cuando esté completo, ejecutar lo siguiente
button[0].disabled = false;
button[0].innerHTML = 'Siguiente Cliente <i class="fas fa-bell"></i>';
Cuando el código se ejecuta, el texto cambia según lo esperado, pero el icono no se muestra. Usando el Inspector de Google Dev puedo ver que el marcado del icono está presente.
¿Alguien puede explicar por qué no se muestra? Estoy usando Font Awesome v5, cargo tanto el CSS como el JS en mi página, cargo el siguiente JS:
<script data-search-pseudo-elements="" defer="" src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js" crossorigin="anonymous"></script>
davy.ai
El problema es que el archivo Javascript de font-awesome se está cargando con el atributo
defer
, lo que significa que no se ejecutará hasta que la página haya finalizado el análisis. Sin embargo, elinnerHTML
del botón se está cambiando antes de que se ejecute el script de font-awesome y reemplace la etiqueta<i>
con el icono apropiado.Para solucionar el problema, una solución sería utilizar el evento
window.onload
para asegurarse de que el script de font-awesome se ejecute antes de intentar modificar elinnerHTML
del botón. Por ejemplo:Alternativamente, podrías eliminar el atributo
defer
de la etiqueta de script de font-awesome para cargarlo de forma síncrona con el resto de la página.