我是CSS和jQuery的新手。我想在图标中填充颜色。例如，像Instagram的心脏图标一样(当双重敲击时，它充满了红色(。
我使用字体很棒。因此，我能够获得心脏图标，但我无法按照自己想要的方式填充颜色。我试图更改背景颜色属性，但它也不起作用。
事实是，当用户单击心脏图标时，应该用红色填充。你能指导我吗？
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.
如果这不起作用，我应该使用什么而不是字体很棒？
为什么要重塑韦尔？您无需使用自己的样式来管理此操作。
实际上 fontawesome 为每个图标提供了不同的类，例如，对于fa-heart图标，您可以将fa-heart用于填充的心脏，而fa-heart-o用于一个空的。
因此，只需使用jQuery代码在您的图标的click事件上切换这两个类：
$("#heart").click(function() {
$(this).toggleClass('fa-heart-o');
$(this).toggleClass('fa-heart');
});
演示：
$("#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>您可以将CSS类添加到该元素中以样式的外观。在我的示例中，我将单击侦听器添加到该元素，然后切换为CSS CLA。
JS代码：
(function() {
const heart = document.getElementById('heart');
heart.addEventListener('click', function() {
heart.classList.toggle('red');
});
})();
示例链接：
https://codepen.io/bojandevic/pen/mxkzqk
您需要在图标中添加Onlick函数，并创建一个函数以更改此颜色。
<i class="far fa-heart" onclick="changeColor()" id="heart" style="color: green; background-color: red" ></i>
，您的JS应该像：
function changeColor()
{
var icon = document.getElementById('heart');
icon.style.color = "red";
}
使用jquery toggleClass您可以在这样的元素中添加或删除类。
$("#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>您可以使用这样的onClick属性：
<div id="sp"><i class="far fa-heart" id="heart" onclick="changeColor()" style="color: green;" ></i></div>
在您的脚本区域或文件中定义这样的函数：
function changeColor() {
document.getElementById("heart").style.color = "red"; }