更改字形图标的颜色
[英]Change color of glyph icon
问题描述
标准字形图标非常无聊
https://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp
以下代码有效， 但不是用黑色填充星形，有没有办法将其设置为其他颜色，例如橙色？
此外，还有一组更有趣的图标可供下载以用于按钮吗？
const glyphStarEmpty = 'glyphicon glyphicon-star-empty';
const glyphStarFull = 'glyphicon glyphicon-star';
class Checkbox extends React.Component {
constructor(props) {
super(props);
this.state = {
checked: false,
currentGlyph: glyphStarEmpty
};
this.toggleChecked = this.toggleChecked.bind(this);
}
toggleChecked() {
if(this.state.currentGlyph == glyphStarEmpty){
this.setState({
currentGlyph : glyphStarFull
})
}
else{
this.setState({
currentGlyph : glyphStarEmpty
})
}
this.setState({
checked: !this.state.checked
});
}
render() {
return (
<button className={this.state.currentGlyph} onClick={this.toggleChecked}></button>
);
}
}
6 个解决方案
解决方案1
0 2017-03-05 15:53:27
您可以使用内联样式：
<button style={{ color: 'orange' }} className={this.state.currentGlyph} onClick={this.toggleChecked}></button>
如果您还需要黑色轮廓，请尝试以下操作：
<button style={{ color: 'orange', textShadow: '0 0 1px black' }} className={this.state.currentGlyph} onClick={this.toggleChecked}></button>
解决方案2
0 2017-03-05 15:54:10
您可以使用简单的CSS做到这一点
<span class="icon-some"></span>
.icon-some {
color: orange;
}
解决方案3
0 2017-03-05 15:54:40
哇，为什么这么复杂？ 只需在<head>标记内添加一些CSS：
<style type="text/css">
.glyphicon { color: orange; }
</style>
解决方案4
0 2017-03-05 15:57:14
您可以像这样添加css color属性：
HTML
<span class="orange glyphicon glyphicon-envelope"></span>
CSS
.orange {color: orange;}
解决方案5
0 2017-03-05 16:07:02
您可以使用的另一个图标来自字体真棒 。它们有大量的按钮图标，我敢肯定您会喜欢的，我已经在很多网站上使用了此图标，以便更改颜色，就像在其他CSS上一样成员在我之前告诉过你
解决方案6
0 2017-03-05 16:42:08
在周围答案的帮助下，解决方案变得显而易见。 这不是完美的，因为我希望内部具有纯白色的黑色边框（或什至是向上/向下三角形使用灰色的stackoverflow配色方案）获得未经检查的状态，以实现最大对比度，但是我将自行修复：
render() {
if(!this.state.checked)
{
return (
<button className={glyphStarFull} onClick={this.toggleChecked}></button>
);
}
else
{
return (
<button style={{ color: 'orange', textShadow: '0 0 1px black' }} className={this.state.currentGlyph} onClick={this.toggleChecked}></button>
如何在div标签内的悬停上更改字形图标的颜色？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.