Hacer que un ícono cambie al dar clic en botón

Miroku97 · 11 Sep 2022

Hola! quisiera saber la manera de cómo hacer que un icono de fontawesome cambie al dar clic en el botón.
Por ejemplo: como el que posee esta página de anime

De ser posible sin jquery pero si no, pues igual me sirve cualquier solución o método (si se puede solo con css, estaría genial).

Muchas gracias de antemano.

Miroku97 · 12 Sep 2022

Bueno después de buscar un rato ya encontré un JS que cumple el cometido, de alguna forma igual pude cambiar los íconos, ya que el original era con los ojos de visto y no visto:

HTML:

<button>Cambiar Orden <i class="fa fa-sort-amount-asc"></i>
</button>

el Script:

JavaScript:

<script>
document.querySelector('button').addEventListener('click', function() {
  const icon = this.querySelector('i');
  const text = this.querySelector('span');

  if (icon.classList.contains('fa-sort-amount-asc')) {
    icon.classList.remove('fa-sort-amount-asc');
    icon.classList.add('fa-sort-amount-desc');
    text.innerHTML = 'Hide';
  } else {
    icon.classList.remove('fa-sort-amount-desc');
    icon.classList.add('fa-sort-amount-asc');
    text.innerHTML = 'Show';
  }
});
</script>

El script iba para un html en donde el texto estaba entre <span></span>, cosa que igual se podía cambiar el texto al mismo tiempo que cambia el icono, dejaré el HTML original:
<button><i class="fa fa-eye"></i> <span>Show</span></button>
Aquí artículo

Y bueno para que cambie el texto se edita en el script "Hide" por otra palabra, y "Show" igual por el del HTML del span. En mi caso como no me interesaba esa función pues igual y retiré esas líneas del script y funciona normal.
En realidad es conveniente todo el script, como para que quede igual que el ejemplo que buscaba, y los cambios que mencioné antes pues iria "Mayor a menor" y en "Show" por "Menor a Mayor", igual dentro de "span" en el html "Menor a mayor".

Bueno igual si hay más sugerencias estoy atento o si no igual que a alguien le sirva este.

jsucubpi · 15 Sep 2022

Ok mira no soy programador pero si he visto varios tutoriales en dónde un css puede simular jQuery o js con limitaciones pero bueno es código simple. Lo que no te puedo proporcionar son códigos pero bueno si eres programador y tienes exp sabrás la idea

Etiquetas probables tienes el checkbox con una imagen y el atributo display:none en el css y cambiando la configuración para que muestre otra imagen con el checked en el css.

Te puedo recomendar este canal: https://youtube.com/c/Jygproyectosweb
El creador sube tutoriales para hacer cosas con html y css que generalmente se realizan con js u otros lenguajes.

CANIBAL · 16 Sep 2022

Y porqué no simplemente usas a:visited??

Digo, para hacerlo un poco más "automatico" y no estar escribiendo mucho código.

Miroku97 · 16 Sep 2022

Rykrdo dijo:
Y porqué no simplemente usas a:visited??

Digo, para hacerlo un poco más "automatico" y no estar escribiendo mucho código.

Pues no soy muy conocedor de estas cosas, pero ahora que lo mencionas vi una documentación al respecto, de primeras parece ser que es como que al dar clic cambia el aspecto, aplicable al css.
Posiblemente sirva, pero no sabría como aplicarlo para este caso. Si sabes ojalá puedas dar un ejemplo.

Miroku97 · 16 Sep 2022

jsucubpi dijo:
Ok mira no soy programador pero si he visto varios tutoriales en dónde un css puede simular jQuery o js con limitaciones pero bueno es código simple. Lo que no te puedo proporcionar son códigos pero bueno si eres programador y tienes exp sabrás la idea

Etiquetas probables tienes el checkbox con una imagen y el atributo display:none en el css y cambiando la configuración para que muestre otra imagen con el checked en el css.

Te puedo recomendar este canal: https://youtube.com/c/Jygproyectosweb
El creador sube tutoriales para hacer cosas con html y css que generalmente se realizan con js u otros lenguajes.

Tampoco soy programador, ya ves que estamos en la sección de blogger jeje. Sé lo básico no más de algunas cosas, y más me baso en códigos pre-elaborados de terceros para usarlos.
Igual muchas gracias por la recomendación del canal.

Puko · 5 Nov 2023

Hacer que un ícono cambie al dar clic en botón

Miroku97

Miroku97

jsucubpi

CANIBAL

Miroku97

Miroku97

Puko

Temas similares