i am new to css and jquery. I want to fill the color in icon. For example , Like instagram's heart icon (when double tapped it is filled with red color).
I am using font awesome for the same. so i am able to get the heart icon but i can not fill the color the way i want. I tried to change background-color property but it does not work either.
The thing is, when user clicks on the heart icon, it should be filled with the red color. Can you guide me please?
My html file
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="all.js"></script>
</head>
<body>
<div id="sp"><i class="far fa-heart" id="heart" style="color: green; background-color: red" ></i> </div>
</body>
</html>i am new to css and jquery. I want to fill the color in icon. For example , Like instagram's heart icon (when double tapped it is filled with red color).
I am using font awesome for the same. so i am able to get the heart icon but i can not fill the color the way i want. I tried to change background-color property but it does not work either.
The thing is, when user clicks on the heart icon, it should be filled with the red color. Can you guide me please?
My html file
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="all.js"></script>
</head>
<body>
<div id="sp"><i class="far fa-heart" id="heart" style="color: green; background-color: red" ></i> </div>
</body>
</html>all.js file is the file i downloaded for icons.
What should i use instead of font awesome, if this does not work out?
Share Improve this question edited Apr 3, 2018 at 10:49 cнŝdk 32.2k7 gold badges60 silver badges80 bronze badges asked Apr 3, 2018 at 10:10 Dev SolankiDev Solanki 1011 gold badge1 silver badge10 bronze badges 4- switch the image after the click, using a red heart icon. – Abinash Gupta Commented Apr 3, 2018 at 10:13
- Do u want it animated? Cause then you should just search for a "Heart button" on internet and copy paste code. for example: codepen.io/bnewton/pen/KrbLkx – Jeremy Commented Apr 3, 2018 at 10:14
- Or just a simple one like codepen.io/thebabydino/pen/MebVWR or codepen.io/thebabydino/pen/gMLeRz – Jeremy Commented Apr 3, 2018 at 10:18
- needed just simple one, thank you so much.. – Dev Solanki Commented Apr 3, 2018 at 10:20
5 Answers
Reset to default 2Why would you reinvent the weel? You don't need to manage this with your own styles.
In fact FontAwesome gives you different classes for each icon, for example for the fa-heart icon you can use fa-heart for a filled heart and fa-heart-o for an empty one.
So just use a jQuery code that toggles these two classes on click event of your icon:
$("#heart").click(function() {
$(this).toggleClass('fa-heart-o');
$(this).toggleClass('fa-heart');
});
Demo:
$("#heart").click(function() {
$(this).toggleClass('fa-heart-o');
$(this).toggleClass('fa-heart');
});<link href="https://maxcdn.bootstrapcdn./font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<i class="fa fa-heart" id="heart"></i>You can add a css class to the element to style it's appearance. In my example I added click listener to the element and just toggled CSS clas.
JS code:
(function() {
const heart = document.getElementById('heart');
heart.addEventListener('click', function() {
heart.classList.toggle('red');
});
})();
Example Link:
https://codepen.io/bojandevic/pen/mxKZqK
You need add onlick function in the icon, and create a function to change te color of this.
<i class="far fa-heart" onclick="changeColor()" id="heart" style="color: green; background-color: red" ></i>
And your js should be like:
function changeColor()
{
var icon = document.getElementById('heart');
icon.style.color = "red";
}
Using jquery toggleClass you can add or remove classes from each element in the elements like this.
$("#heart").on("click", function() {
$(this).toggleClass('oldColor', 'newColor');
});.newColor {
color: red;
}
.oldColor {
color: green
}<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="all.js"></script>
</head>
<body>
<div id="sp"><i class="far fa-heart oldColor" id="heart">Heart</i> </div>
</body>
</html>you can use onclick attribute like this:
<div id="sp"><i class="far fa-heart" id="heart" onclick="changeColor()" style="color: green;" ></i></div>
and in your script area or file define a function like this:
function changeColor() {
document.getElementById("heart").style.color = "red"; }