web-dev-qa-db-fra.com

Pourquoi mes React Bootstrap Glyphicons ne s'affichent-ils pas?)

J'utilise React Bootstrap Glyphicon component mais aucun des glyphicons n'apparaît. Voici mon code jusqu'à présent:

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;

Voici mon package.json fichier:

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

En effet, Bootstrap utilise la police Gylphicon Halflings pour afficher ses glyphicons. Le CSS de Bootstrap doit être explicitement inclus, car il importe les glyphicons, sinon les glyphicons n'apparaîtront pas. Vous pouvez ajouter le bootstrap.min.css fichier dans votre index.html qui l'importe pour vous:

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

Il y avait un problème soulevé sur GitHub concernant ce problème exact. Il n'est pas dit explicitement que vous devez inclure le CSS de Bootstrap, et j'ai rencontré ce problème auparavant. Vous devez inclure le fichier CSS, sinon les glyphicons ne seront pas importés et vos composants n'afficheront rien.

20
Li357

Je crois que le react-bootstrap n'inclut pas le composant glyphicons, (j'ai vérifié les composants là-bas: https://react-bootstrap.github.io/components/alerts/ )

Vous devrez donc ajouter des glyphicons au-dessus du paquet react-bootstrap:

Dans le fichier index.html, ajoutez la ligne suivante:

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

Cela devrait résoudre le problème sans importer une deuxième fois l'ensemble bootstrap css.

0
Steven Luong C