왜 내 React Bootstrap Glyphicons가 보이지 않습니까?

Question

React Bootstrap의 Glyphicon 구성 요소를 사용하고 있지만 글리프콘이 나타나지 않습니다.

하는 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; 

여기 내 package.json 파일입니다 : 여기에 지금까지 내 코드는

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

는 부트 스트랩이 글꼴을 사용이되기 때문에 Glyphicon Halflings는 글리 phicon을 표시합니다. 부트 스트랩의 CSS는 글리프콘을 가져올 때 명시 적으로 포함되어야합니다. 그렇지 않으면 글리프콘이 표시되지 않습니다. 당신은 당신을 위해 그것을 가져 당신의 index.html에 bootstrap.min.css 파일을 추가 할 수 있습니다

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

이 정확한 문제에 대한 문제 raised on GitHub 있었다. Bootstrap의 CSS를 포함해야한다고 명시 적으로 말한 것은 아니며 이전에이 문제에 부딪혔습니다. CSS 파일을 포함해야합니다. 그렇지 않으면 글리프콘을 가져 오지 않으며 구성 요소에는 아무 것도 표시되지 않습니다.