Change color of glyph icon
Question
The standard glyph icons are pretty boring
https://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp
The following code works, but instead of a filled in star with black, is there a way to make it some other color, eg, orange?
In addition, is there a more interesting set of icons for download to use for buttons?
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 answers
solution1
0 2017-03-05 15:53:27
You could use an inline style:
<button style={{ color: 'orange' }} className={this.state.currentGlyph} onClick={this.toggleChecked}></button>
If you want a black outline in addition, try this:
<button style={{ color: 'orange', textShadow: '0 0 1px black' }} className={this.state.currentGlyph} onClick={this.toggleChecked}></button>
solution2
0 2017-03-05 15:54:10
You can do that with simple css
<span class="icon-some"></span>
.icon-some {
color: orange;
}
solution3
0 2017-03-05 15:54:40
Wow, why so complicated? Just add some CSS inside the <head> tag:
<style type="text/css">
.glyphicon { color: orange; }
</style>
solution4
0 2017-03-05 15:57:14
You could add a css color property like this:
HTML
<span class="orange glyphicon glyphicon-envelope"></span>
CSS
.orange {color: orange;}
solution5
0 2017-03-05 16:07:02
您可以使用的另一个图标来自字体真棒 。它们有大量的按钮图标，我敢肯定您会喜欢的，我已经在很多网站上使用了此图标，以便更改颜色，就像在其他CSS上一样成员在我之前告诉过你
solution6
0 2017-03-05 16:42:08
With the help from surrounding answers, the solution became obvious. This is not perfect since I want a black border with a pure white inside (or maybe even the way stackoverflow color scheme using gray for the up/down triangles) for unchecked state for maximum contrast, but I will fix that on my own:
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.