如何在引导程序中更改字形图标的内部颜色

How to change inner color of glyphicons in Bootstrap?

本文关键字：图标 字形 内部 颜色 引导程序      更新时间：2023-12-11

我有一个像这样的空星形按钮，

<button type="button" class="btn btn-default btn-lg" id="refresh">
      <span class="glyphicon glyphicon-star-empty"></span>
</button>

当我点击它时，我希望内部颜色变为黄色，如图所示-http://s21.postimg.org/3qwgsnrcj/star.png

我们如何使用Bootstrap和Javascript来实现这一点？

这里有一个链接到我目前为止得到的东西-http://jsbin.com/refatelefi/edit?html，输出

字形图标就像一个字符。可以通过更改跨度样式的颜色属性来更改其颜色。

<button type="button" class="btn btn-default btn-lg" id="refresh">
   <span class="glyphicon glyphicon-star-empty"></span>
</button>
.glyphicon-star-empty {
   color: yellow;
}

但是，您选择的图标未满，因此无法按要求更改内部。我建议使用"字形星"代替。

<button type="button" class="btn btn-default btn-lg" id="refresh">
   <span class="glyphicon glyphicon-star"></span>
</button>
.glyphicon-star {
   color: yellow;
}

您可以使用完整的图标和颜色，然后通过黑色或任何其他颜色的文本阴影重新绘制外部。

.glyphicon-star {
   color: yellow;
  text-shadow:0 0  black,0 0  black,0 0  black,0 0  black,0 0  black;
}
.bis.glyphicon-star {
  text-shadow:0 0 1px  black,0 0 1px  black,0 0 1px  black,0 0 1px  black ;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-default btn-lg" id="refresh">
   <span class="glyphicon glyphicon-star"></span>
</button>
<button type="button" class="btn btn-default btn-lg" id="refresh">
   <span class="glyphicon glyphicon-star bis"></span>
</button>

我不确定是否能让它与您的star.png完全相似，但您可以使用javascript在按钮上设置css颜色属性，也可以使用背景颜色属性。这是一个简单的演示http://jsbin.com/netufaruxa/1/edit?html，js，输出

HTML:

<body>
 <button id="myBtn" type="button" class="btn btn-default btn-lg" id="refresh">
      <span class="glyphicon glyphicon-star-empty"></span>
 </button>
</body>

JS:

function colorChange(){
  if(document.getElementById("myBtn").style.color==""){
    document.getElementById("myBtn").style.color="yellow";
  }else{
    document.getElementById("myBtn").style.color="";
  }
}
(function() {
document.getElementById("myBtn").addEventListener("click", colorChange);
})();
相关文章：