Question

我是css和jquery的新手。我想用图标填充颜色。例如，像Instagram的心脏图标（双击时，它充满了红色）。

我使用的字体很棒。所以我能够获得心脏图标，但我无法按照我想要的方式填充颜色。我试图改变背景颜色属性，但它也不起作用。

问题是，当用户点击心形图标时，应该用红色填充。你能指导我吗？

My html file

＆＃13;

<!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>

＆＃13;

all.js file is the file i downloaded for icons.

如果不能解决问题，我应该使用什么而不是字体真棒？

Answer 1

你为什么要重新发明？您不需要使用自己的风格来管理它。

事实上， FontAwesome 为每个图标提供了不同的类，例如fa-heart图标，您可以使用fa-heart填充心脏和{{ 1}}为空的。

所以只需使用一个jQuery代码，在你的图标fa-heart-o事件上切换这两个类：

click

<强>演示：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

使用jquery toggleClass，您可以添加或删除元素中每个元素的类。

＆＃13;

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

＆＃13;

.newColor {
  color: red;
}

.oldColor {
  color: green
}

＆＃13;

<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>

＆＃13;

Answer 3

您需要在图标中添加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";    
}

Answer 4

您可以向元素添加css类以设置其外观的样式。在我的例子中，我添加了单击侦听器到元素，只是切换CSS clas。

JS代码：

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

示例链接：

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

Answer 5

你可以使用这样的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";  }

填充图标中的颜色

5 个答案: