Question

标准字形图标非常无聊

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>
      );
  }
}

Answer 1

您可以使用内联样式：

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

Answer 2

你可以用简单的css

来做到这一点

getImages

Answer 3

哇，为什么这么复杂？只需在<head>标记内添加一些CSS：

<style type="text/css">
  .glyphicon { color: orange; }
</style>

Answer 4

你可以像这样添加一个css颜色属性：

HTML

<span class="orange glyphicon glyphicon-envelope"></span>

<强> CSS

.orange {color: orange;}

Answer 5

您可以使用的另一个图标来自font awesome。它们有大量的按钮图标，我确定您会喜欢它，我已经使用了这个图标了很多网站，改变颜色只是广告一些CSS，正如其他成员在我之前告诉你的那样

Answer 6

在周围答案的帮助下，解决方案变得明显。这并不完美，因为我想要一个带有纯白色内部的黑色边框（或者甚至是使用灰色的上/下三角形的stackoverflow颜色方案），以获得最大对比度的未经检查状态，但我会自己修复：< / p>

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>

更改标志符号图标的颜色

6 个答案: