ブートストラップグリフィンの色を変更するには？

Question

スターグリフコンの色を変更するにはどうすればよいですか？私のコードは

<span class="glyphicon glyphicon-star-empty " onclick = "addToFav()">  </span> 

グリフコンのクリックでJavaScript関数を呼び出しています。また、下の画像に示すように、グリフコンの色を変更したいと思います。私は、Gyphiconの背景色を変更しようとしましたが、それは私に望ましい出力を与えません。 ** "グリフコンのstyle.colorを変更すると、グリフコンの色が変更されますがグリフコンは目的の色で塗りつぶされません。最初のイメージは元のグリフコンです。結果。第三の画像がglyphiconの背景色を変更するglyphiconである。第4の画像が赤色にglyphiconのstyle.colorの変化にglyphiconするために何が起こるかを示している。

Answer 1

これを試してみてください。

<span class="glyphicon glyphicon-star-empty " onclick = "addToFav(this)"> </span> 
<script> 
    function addToFav(ths){ 
     ths.style.color = "#ffea00"; 
    } 
</script> 

Answer 2

あなたはCSSコードを使用できますeg->色：黄色;

Answer 3

<span class="glyphicon glyphicon-print" style="color:red;background-color:blue;padding:10px"></span> 

あなたは、色、背景色のようにしたい、これまで、パディングがそれをどのように変化するかを変更することができます

Answer 4

私が正しく質問を理解していれば、あなたは満たされた黄色に黒のアウトラインからスターを変更したいです星？その場合は、colorを設定するスタイルだけでなく、glyphicon-star-emptyクラスをglyphicon-starクラスに置き換える必要があります。

Answer 5

次のコードは私にとって最善のものでした。グリフィコンのクラスリストでは、塗りつぶしのクラスと空のクラスのクラスの両方を追加しました。空の星クラスは星クラスの後に書かれています。したがって、空の星クラスは塗りつぶされた星クラスをオーバーライドします。したがって、最初は画面上に空の開始点が表示されます。コードは次のとおりです

<span id="star-glyp"class="glyphicon glyphicon-star glyphicon-star-empty" onclick = "addToFav()"> 

このグリフコンをクリックすると、addToFav（）関数が呼び出されます。この関数では、目的の出力を生成するために2つのことを行っています。まず、グリフコンの色を黄色に変更します。次に、クラスリストからglyphicon-star-emptyクラスを削除します。コードは次のようになります：

function addToFav(){ 

       ths = document.getElementById("star-glyp"); 
       ths.style.color="YELLOW"; 
       ths.classList.remove('glyphicon-star-empty'); 
}