Question

我有一个字体很棒的star-o图标和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中的星级而不是.star-o

所以

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

试试这个： -

＆＃13;

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

＆＃13;

或尝试此

＆＃13;

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

＆＃13;

改变字体 - 令人敬畏的星形图标的颜色

2 个答案: