我是 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.
如果这不起作用，我应该使用什么来代替 font Awesome？
最佳答案
你为什么要重新发明威尔？您不需要使用自己的样式来管理它。
事实上 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>关于javascript - 为图标填充颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49627444/