フォント素晴らしいホバー変更

Question

私は、次のアイコンがあります。私はそれを置くと、私は黒にその内側の色を変更するには、アイコンを希望

.fa-star-o:hover { 
 
    color: black; 
 
}

<link href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" rel="stylesheet" /> 
 
<i class="fa fa-star-o fa-2x"></i>

とをマウスのように、fa-starアイコンのようなものですが、このコードを使用すると、の輪郭の色がに変更されます。

Answer 1

使用stacked icons：

.fa-star{ 
 
    color: white /* your background color */ 
 
} 
 

 
.fa-stack:hover .fa-star{ 
 
    color: black; 
 
}

<link href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" rel="stylesheet"/> 
 
<span class="fa-stack fa-lg"> 
 
    <i class="fa fa-star fa-stack-2x"></i> 
 
    <i class="fa fa-star-o fa-stack-2x"></i> 
 
</span>

JSFiddle

Answer 2

あなたはアイコンfa-star-oを必要としません。唯一fa-star使用します

.fa-star:hover { 
 
    color: black; 
 
    cursor:pointer 
 
} 
 
.fa-star { 
 
    color:white; 
 
    transition:color 0.5s 
 
} 
 
body { 
 
    background-color:red !important; 
 
}

<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css"> 
 
<link rel="stylesheet" href="http://fontawesome.io/assets/css/site.css"> 
 

 
<div style="font-size: 24px; line-height: 1.5em;" id="parent"> 
 
    <div style="font-size: 24px; line-height: 1.5em;"> 
 
     <i class="fa fa-star" aria-hidden="true"></i> 
 
    </div> 
 
</div>