Почему мои загрузки технологии glyphicons реагируют показывает?


Я использую реагировать Bootstrap В. Glyphicon компонент, но ни одна из технологии glyphicons появляется. Вот мой код до сих пор:

Индекс.js

import React from 'react';
import ReactDOM from 'react-dom';
import Global from './components/Global';

ReactDOM.render(
    <Global />, 
    document.getElementById('root')
);

Глобальный.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"
  }
}
1 8

1 ответ:

Это потому, что загрузчик использует шрифт Gylphicon полурослики, чтобы отобразить его технологии glyphicons. УСБ загрузчик должен быть явно включен, так как он импортирует технологии glyphicons, или технологии glyphicons не появится. Вы можете добавить файл bootstrap.min.css к вашему файлу index.html, который импортирует его для вас:

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

На GitHub был поднят вопрос, касающийся именно этого вопроса. Это явно не сказано, что вам нужно включить CSS Bootstrap, и я столкнулся с этой проблемой раньше. Вы должны включить следующее: Файл CSS или технологии glyphicons не будут импортированы и ваш компонент будет отображать ничего.