爲什麼我的React Bootstrap Glyphicons不顯示？

我正在使用React Bootstrap的Glyphicon組件，但沒有任何圖形顯示出來。這是我到目前爲止的代碼：爲什麼我的React Bootstrap Glyphicons不顯示？

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

來源

2017-05-12 Peter Tran

嘿，感謝您對我的評論以及udemy課程的評論，並且沒有聲明將它包含在index.html中，請您詳細說明如何操作？謝謝。 –

這是因爲引導使用的字體Gylphicon Halflings展示它的圖標。 Bootstrap的CSS必須顯式包含，因爲它會導入圖形符號，否則圖形將不會顯示出來。您可以在bootstrap.min.css文件添加到您的index.html其中進口爲你：

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

有關於這個確切問題一個問題raised on GitHub。沒有明確說你需要包含Bootstrap的CSS，而我之前遇到過這個問題。您必須包含CSS文件，否則圖形將不會被導入，您的組件將不顯示任何內容。

來源

2017-05-12 03:40:54 Li357

要添加到此爲什麼這可以解決此問題的原因是您可能有bootstrap css的本地副本，它指向cdn版本的字體。您必須正確下載引導程序，並在代碼中包含字體文件夾以使其在本地工作。 – IfTrue

爲什麼我的React Bootstrap Glyphicons不顯示？

回答

相關問題