Add some hues to the icons

Question

Add some hues to the icons

I am a beginner when it comes to CSS and jQuery. My goal is to color in an icon, similar to Instagram's heart icon which turns red when double-tapped.

Currently, I am using Font Awesome for this purpose. However, I am struggling to fill the color as desired. Changing the background-color property has not yielded the results I want.

Essentially, I would like the heart icon to change to a red color when a user clicks on it. Can anyone provide guidance on how to achieve this?

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>

The "all.js" file contains the icons that I downloaded.

If Font Awesome doesn't work out, are there any alternatives you can recommend?

javascript jquery html css font-awesome

Answer 1

Answer №1

Why bother trying to create something already available? You can easily style icons without reinventing the wheel.

Instead of creating your own styles, consider using FontAwesome. FontAwesome provides different classes for each icon, such as using fa-heart for a filled heart and fa-heart-o for an empty one.

All you need is a simple jQuery code that toggles between these two classes when the icon is clicked:

$("#heart").click(function() {
  $(this).toggleClass('fa-heart-o');
  $(this).toggleClass('fa-heart');
});

Check out this demo:

$("#heart").click(function() {
  $(this).toggleClass('fa-heart-o');
  $(this).toggleClass('fa-heart');
});

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<i class="fa fa-heart" id="heart"></i>

Answer 2

Why bother trying to create something already available? You can easily style icons without reinventing the wheel.

Instead of creating your own styles, consider using FontAwesome. FontAwesome provides different classes for each icon, such as using fa-heart for a filled heart and fa-heart-o for an empty one.

All you need is a simple jQuery code that toggles between these two classes when the icon is clicked:

$("#heart").click(function() {
  $(this).toggleClass('fa-heart-o');
  $(this).toggleClass('fa-heart');
});

Check out this demo:

$("#heart").click(function() {
  $(this).toggleClass('fa-heart-o');
  $(this).toggleClass('fa-heart');
});

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<i class="fa fa-heart" id="heart"></i>

Answer 3

Answer №2

To enhance the appearance of an element, you can apply a CSS class to it. In this scenario, I incorporated a click listener to the element and simply toggled the CSS class.

Here is the JavaScript code snippet:

(function() {
  const heart = document.getElementById('heart');
  heart.addEventListener('click', function() {
    heart.classList.toggle('red');
  });
})();

Check out the example here:

https://codepen.io/bojandevic/pen/mxKZqK

Answer 4

To enhance the appearance of an element, you can apply a CSS class to it. In this scenario, I incorporated a click listener to the element and simply toggled the CSS class.

Here is the JavaScript code snippet:

(function() {
  const heart = document.getElementById('heart');
  heart.addEventListener('click', function() {
    heart.classList.toggle('red');
  });
})();

Check out the example here:

https://codepen.io/bojandevic/pen/mxKZqK

Answer 5

Answer №3

To make the icon change color when clicked, you must add an onclick function to it and create a corresponding JavaScript function.

<i class="far fa-heart" onclick="changeColor()" id="heart" style="color: green; background-color: red" ></i>

Here is how your JavaScript code should look:

function changeColor()
{
   var icon = document.getElementById('heart');
   icon.style.color = "red";    
}

Answer 6

To make the icon change color when clicked, you must add an onclick function to it and create a corresponding JavaScript function.

<i class="far fa-heart" onclick="changeColor()" id="heart" style="color: green; background-color: red" ></i>

Here is how your JavaScript code should look:

function changeColor()
{
   var icon = document.getElementById('heart');
   icon.style.color = "red";    
}

Answer 7

Answer №4

By utilizing jQuery's toggleClass function, you have the ability to seamlessly include or exclude classes from each element within the specified elements.

$("#heart").on("click", function() {
  $(this).toggleClass('oldColor', 'newColor');
});

.newColor {
  color: red;
}

.oldColor {
  color: green
}

<script src="https://ajax.googleapis.com/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>

Answer 8

By utilizing jQuery's toggleClass function, you have the ability to seamlessly include or exclude classes from each element within the specified elements.

$("#heart").on("click", function() {
  $(this).toggleClass('oldColor', 'newColor');
});

.newColor {
  color: red;
}

.oldColor {
  color: green
}

<script src="https://ajax.googleapis.com/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>

Answer 9

Answer №5

If you want to change the color of an element on click, you can achieve this by using the onclick attribute in HTML like so:

<div id="sp">
    <i class="far fa-heart" id="heart" onclick="changeColor()" style="color: green;" ></i>
</div>

Then, in your JavaScript code area or file, define a function named changeColor that changes the color of the heart icon to red:

function changeColor() {
    document.getElementById("heart").style.color = "red";  
}

Answer 10

If you want to change the color of an element on click, you can achieve this by using the onclick attribute in HTML like so:

<div id="sp">
    <i class="far fa-heart" id="heart" onclick="changeColor()" style="color: green;" ></i>
</div>

Then, in your JavaScript code area or file, define a function named changeColor that changes the color of the heart icon to red:

function changeColor() {
    document.getElementById("heart").style.color = "red";  
}

Add some hues to the icons

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

The Angular Syncfusion schedule is unable to call upon an object that may potentially be 'undefined'

Step-by-step guide on showcasing a quiz utilizing Magnific-popup and ajax

"Combining Laravel's Joining Table Feature with the Power of JQuery and AJAX Calls

Tips for beginner on converting form data to JSON using jQuery

Ways to disable .animate() specifically for a particular element

Dynamic Population of Django Drop Down List using JavaScript

Using jQuery to trigger alert only once variable has been updated

Align text within HTML with the use of Bootstrap

The CPU is maxed out at 100% utilization

What steps should I take to design a mobile-friendly navigation bar?

Store data in Laravel's storage directory

Error: TypeScript is unable to find the property URL within the specified type. Can you help

What is the best way to showcase a specific column from a dataset using Vue.js and axios?

What is the best way to access the original observed node using MutationObserver when the subtree option is set to

View 360-degree panoramas on an iPad using the krpano HTML

What can I do to prevent cookies from being deleted when I refresh the page or change the window location?

What is the best way to incorporate a div below an image in Ubergallery?

Send the JSON file to the server by uploading it

Angular 7 routing glitches causing page refresh issues

Creating a visual list in a React JS component with images and text