更改字体真棒星形图标的颜色

Question

我有一个很棒的星号图标和 onclick 我想将其颜色设置为黄色。有人可以帮助我吗？

<div id="favourite_star"> <span class="fa-stack fa-lg left"> <i class="fa fa-square-o fa-stack-2x"></i> <i class="fa fa-fw fa-lg fa-star-o fa-stack-1x favourite_icon" onclick="setLocally()"></i></span> </div>

我只想把星星里面的颜色设置成黄色。我尝试使用 jquery 将颜色设置为黄色，但它只将星星的边缘设置为黄色，然后我尝试将背景颜色设置为黄色，然后将整个正方形设置为黄色。

Answer 1

您必须更改 .star instead of .star-o

中的星星 class

所以

// HTML
<i class="fa fa-fw fa-lg fa-star-o fa-stack-1x favourite_icon"></i>

// JS
$(".favourite_icon").click(function(){
 $(this).css({"color": "yellow"}).removeClass('fa-star-o').addClass('fa-star');
});

Answer 2

试试这个：-

<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
</head>
<body>



<i class="fa fa-star" style="font-size:48px;color:yellow"></i>
<br>



</body>
</html>

或者试试这个

<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
</head>
<body>

<h1>fa fa-star</h1>

<i class="fa fa-star"></i>
<i class="fa fa-star" style="font-size:24px"></i>
<i class="fa fa-star" style="font-size:36px"></i>
<i class="fa fa-star" style="font-size:48px;color:yellow"></i>
<br>

<p>Used on a button:</p>
<button style="font-size:24px">Button <i class="fa fa-star"></i></button>

<p>Unicode:</p>
<i style="font-size:24px" class="fa">&#xf005;</i>

</body>
</html>

更改字体真棒星形图标的颜色

Change color of font-awesome star icon

html

javascript

css

jquery

font-awesome