Why aren't my React Bootstrap Glyphicons showing?

Question

I'm using React Bootstrap's Glyphicon component but none of the glyphicons are showing up. Here is my code so far:

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Global from './components/Global';

ReactDOM.render(
    <Global />, 
    document.getElementById('root')
);

Global.js

import React, { Component } from 'react';
import { FormGroup, FormControl, InputGroup, Glyphicon } from 'react-bootstrap';

class Global extends Component {
    render() {
        return(
          <div>
            <h2> Book Explorer!</h2>
              <FormGroup>
              <InputGroup>
                <FormControl
                  type="text"
                  placeholder="Search for a book"
                />
              <InputGroup.Addon>
                <Glyphicon glyph="search"></Glyphicon>
              </InputGroup.Addon>
            </InputGroup>
            </FormGroup>
          </div>
        )
    }
}

export default Global;

Here's my package.json file:

{
  "name": "setup",
  "version": "1.0.0",
  "babel": {
    "presets": [
      "es2015",
      "react"
    ]
  },
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-polyfill": "^6.22.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.24.1",
    "react": "^15.5.4",
    "react-bootstrap": "^0.31.0",
    "react-dom": "^15.5.4",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.2"
  }
}

Answer 1

This is because Bootstrap uses the font Gylphicon Halflings to display its glyphicons. Bootstrap's CSS must be explicitly included, as it imports the glyphicons, or else the glyphicons will not show up. You could add the bootstrap.min.css file to your index.html which imports it for you:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

There was an issue raised on GitHub regarding this exact issue. It's not explicitly said that you need to include Bootstrap's CSS, and I ran into this issue before. You have to include the CSS file or else the glyphicons will not be imported and your components will display nothing.

Answer 2

Bootstrap 在 v4 中删除了 Glyphicon 支持https://getbootstrap.com/docs/4.0/migration/#components

Answer 3

I believe the react-bootstrap doesn't include the glyphicons component, (I have checked the components there : https://react-bootstrap.github.io/components/alerts/ )

So you would need to add glyphicons on top of the react-bootstrap package :

In the index.html file, add the following line :

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

This should solve the issue without importing a second time the whole bootstrap css.