Dado un documento HTML con dos íconos, la tarea es mostrar alternativamente los íconos cada vez que un usuario hace clic en el ícono. Esta tarea se puede realizar fácilmente con la ayuda de jQuery (una biblioteca de JavaScript).
Enfoque: el enfoque es simplemente agregar un detector de eventos «al hacer clic» en ambos íconos y alternar las clases CSS de ambos íconos usando jQuery. Estas clases son, en última instancia, responsables de mostrar un ícono específico de la biblioteca de íconos (Fontawesome, en este caso). Aquí, hemos utilizado dos iconos,
- Uno con el nombre de clase de «fa-bars» (icono de menú)
- Uno con el nombre de clase de «fa-times» (icono de cruz)
Cada vez que un usuario haga clic en el ícono del menú, su clase de «barras fa» cambiará a «tiempos fa», por lo tanto, se mostrará el ícono de la cruz y viceversa.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width,initial-scale=1.0" />
<!--Bootstrap CSS CDN-->
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous" />
<!--Font Awesome Icons-->
<script src="https://kit.fontawesome.com/f2c150d561.js"
crossorigin="anonymous">
</script>
<!--jQuery CDN-->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity=
"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous">
</script>
</head>
<body>
<!--First Icon-->
<i class="fas fa-bars m-5" style="font-size: 60px;"></i>
<script>
$(".fas").click(function () {
$(".fas").toggleClass("fa-bars fa-times");
});
</script>
</body>
</html>
Producción:
