CODEWITHSUNDEEP
glyphiconsreact-bootstrap
carl
carl

Reputation: 433

How can I make a Glyphicon with inverse coloring with React-Bootstrap?

Using React-Bootstrap, how can I make an inverse glyphicon button?

I have buttons like this:

    <Button onClick={this.onHome} >
    <Glyphicon glyph="home" /> 
    </Button>

but I'd like them to appear reversed.

This question asks about colors which is not the same.

Thanks!

Upvotes: 2

Views: 6113

Answers (1)

Barry Staes
Barry Staes

Reputation: 4115

To show a glyph on a green colored background, use bsStyle="success":

<Button onClick={this.onHome} bsStyle="success">
  <Glyphicon glyph="home" /> 
</Button>

Another example, using a label instead of a button:

<Label bsStyle="success"><Glyphicon glyph="home" /></Label>

Some alternatives to success are warning info and for Button also link. The complete list is in the documentation at http://react-bootstrap.github.io/components.html

Upvotes: 1

Related Questions