logo标签列表

如何在Bootstrap中更改glyphicons的内部颜色？

javascriptcsstwitter-bootstrap
3

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

<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,output
1
@Paulie_D 可以实现，但有点麻烦。OP需要做的是：在按钮上单击时添加另一个星号（使用JS）。请参见https://jsfiddle.net/066bkv87/ - Roy
1
我的意思是，使用CSS...结合JS可以实现任何事情。 - Paulie_D
@Paulie_D 检查一下。幸运的是，OP可以使用JS。 - Roy
3个回答
5
一个 glyphicon 就像一个字符。你可以通过改变 span 样式的 color 属性来改变它的颜色。
<button type="button" class="btn btn-default btn-lg" id="refresh">
   <span class="glyphicon glyphicon-star-empty"></span>
</button>

.glyphicon-star-empty {
   color: yellow;
}

然而，您选择的图标并不完整，因此无法按照您的要求更改其内部。我建议使用“glyphicon glyphicon-star”替代。

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

.glyphicon-star {
   color: yellow;
}
2
您可以使用完整的图标和颜色，然后通过使用黑色或其他颜色的文本阴影来重新绘制其外部。 

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

为什么你要重复多次使用相同的text-shadow规则？ - dandavis
@dandavis 用 text-shadow 无法模仿 SVG 中仅可用的描边效果。如果您将多个 text-shadow 叠加，只会产生模糊效果，但是如果只使用一个 text-shadow，则会更像描边效果。您可以添加任意多的 text-shadow（大小、方向、颜色等）。 - G-Cyrillus
0

我不确定是否能够完全与你的star.png相似，但你可以使用JavaScript在按钮上设置CSS颜色属性，或者你可能想要使用background-color属性。

这里有一个简单的演示：

http://jsbin.com/netufaruxa/1/edit?html,js,output

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);
})();
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接