hellogoodnight hellogoodnight - 7 months ago 15
Javascript Question

Bootstrap: Why isnt my glyphicon showing?

Edit: I use JSX, where className = class.

I just added some Boostrap to my React component, like this:

<div className="col-xs-2">
<a onClick={this.deleteButtonClicked.bind(this, book)}><span className="glyphicon glyphicon-remove"></span></a>
</div>


But the glyphicon does not show up on the page. I am sure I have included Bootstrap in my project correctly, since the grid system works.

This is the generated HTML:

<a data-reactid=".0.1:$0.0.1.0"><span class="glyphicon glyphicon-remove" data-reactid=".0.1:$0.0.1.0.0"></span></a>


Do you know what the problem is?

Edit 2: Here is the generated CSS

box-sizing: border-box
color: rgb(2, 117, 216)
display: inline
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif
font-size: 16px
height: auto
line-height: 24px
width: auto

Answer

The following snippet uses your code and the bootstrap CSS and is working. So it must be something in the link to your CSS or the availability of the font (URL is in the CSS). Just including the CSS in your project is not enough if you're using a CSS on your own server. The font also must be available.

<html>
  <head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
  </head>
  <body>
    <a data-reactid=".0.1:$0.0.1.0"><span class="glyphicon glyphicon-remove" data-reactid=".0.1:$0.0.1.0.0"></span></a>
  </body>
</html>