[英]Change color of glyph icon
The standard glyph icons are pretty boring 标准字形图标非常无聊
https://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp 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>
);
}
}
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>
You can do that with simple css 您可以使用简单的CSS做到这一点
<span class="icon-some"></span>
.icon-some {
color: orange;
}
Wow, why so complicated? 哇,为什么这么复杂? Just add some CSS inside the
<head>
tag: 只需在
<head>
标记内添加一些CSS:
<style type="text/css">
.glyphicon { color: orange; }
</style>
You could add a css color property like this: 您可以像这样添加css color属性:
HTML HTML
<span class="orange glyphicon glyphicon-envelope"></span>
CSS CSS
.orange {color: orange;}
您可以使用的另一个图标来自字体真棒 。它们有大量的按钮图标,我敢肯定您会喜欢的,我已经在很多网站上使用了此图标,以便更改颜色,就像在其他CSS上一样成员在我之前告诉过你
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:
这不是完美的,因为我希望内部具有纯白色的黑色边框(或什至是向上/向下三角形使用灰色的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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.