web-dev-qa-db-ja.com

React Bootstrap Glyphiconsが表示されないのはなぜですか？

私は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"
  }
}
javascriptreactjsreact-bootstrapglyphicons
13
Peter Tran

これは、Bootstrapがフォント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">

問題がありました GitHubで発生 この正確な問題に関して。 BootstrapのCSSを含める必要があるとは明示的に言われていませんが、この問題に遭遇しました。 CSSファイルを含める必要があります。そうしないと、グリフィコンはインポートされず、コンポーネントには何も表示されません。

20
Li357

React-bootstrapにはグリフィコンコンポーネントが含まれていないと思います（コンポーネントを確認しました： https://react-bootstrap.github.io/components/alerts/ ）

したがって、react-bootstrapパッケージの上にグリフィコンを追加する必要があります。

Index.htmlファイルで、次の行を追加します。

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

これにより、bootstrap css。

0
Steven Luong C