मेरे रिएक्ट बूटस्ट्रैप ग्लाइफिकॉन क्यों नहीं दिख रहे हैं?

Question

मैं रिएक्ट बूटस्ट्रैप के 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

क्योंकि यह है बूटस्ट्रैप फ़ॉन्ट का उपयोग करता Gylphicon Halflings अपने ग्लाइफ़िकॉन प्रदर्शित करने के लिए। बूटस्ट्रैप के सीएसएस को स्पष्ट रूप से शामिल किया जाना चाहिए, क्योंकि यह ग्लाइफ़िकॉन आयात करता है, अन्यथा ग्लाइफ़िकॉन दिखाई नहीं देंगे। आप अपने index.html जो यह तुम्हारे लिए आयात करने के लिए bootstrap.min.css फ़ाइल जोड़ सकते हैं:

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

एक मुद्दा raised on GitHub इस सटीक मुद्दे के बारे में नहीं था। यह स्पष्ट रूप से नहीं कहा गया है कि आपको बूटस्ट्रैप के सीएसएस को शामिल करने की आवश्यकता है, और मैं पहले इस मुद्दे में भाग गया था। आपको सीएसएस फ़ाइल को शामिल करना होगा या अन्यथा ग्लाइफ़िकॉन आयात नहीं किए जाएंगे और आपके घटक कुछ भी प्रदर्शित नहीं करेंगे।