En este artículo veremos cómo cambiar el color del icono usando jQuery. Para cambiar el color del ícono, usaremos un método jquery.
Método jQuery css() este método se utiliza para cambiar el estilo de un selector en particular. Este método también se puede utilizar para cambiar el color del icono. Primero, crearemos un elemento de icono usando el icono de fuente impresionante y le agregaremos algunos estilos usando la propiedad CSS. Hemos agregado un botón HTML y cuando se hace clic en el botón, se llama al método css() y se agrega algo de color y color de fondo en el elemento del icono.
Sintaxis:
$(selector).css(property)
Valor devuelto: Devolverá el valor de la propiedad para el elemento seleccionado.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to change the color of the icon using jQuery?
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.btn {
background-color: blue;
border: none;
color: white;
padding: 16px 16px;
font-size: 100px;
border-radius: 5px;
}
#append {
padding: 5px 15px;
}
</style>
<!-- Script to add div element
in the HTML document -->
<script>
$(document).ready(function () {
$("button").click(function () {
$(".btn").css({
backgroundColor: "green",
color: "yellow"
});
});
});
</script>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
How to change the color of the icon using jQuery?
</h3>
<button class="btn">
<i class="fa fa-home"></i>
</button>
<br><br>
<button id="append">
Change Icon Color
</button>
</center>
</body>
</html>
Producción:
