为什么我的 React Bootstrap Glyphicons 没有显示？答案

【问题标题】：Why aren't my React Bootstrap Glyphicons showing?为什么我的 React Bootstrap Glyphicons 没有显示？
【发布时间】：2017-10-11 05:56:35
【问题描述】：

我正在使用 React Bootstrap 的 Glyphicon 组件，但没有显示任何字形图标。到目前为止，这是我的代码：

索引.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"
  }
}

【问题讨论】：

嘿，谢谢您的评论，我正在关注 udemy 课程，它没有说明将其包含在 index.html 中，请您详细说明如何操作？谢谢。

标签： javascript reactjs react-bootstrap glyphicons

【解决方案1】：

这是因为 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">

关于这个确切的问题，raised on GitHub 存在问题。没有明确说需要包含 Bootstrap 的 CSS，我之前也遇到过这个问题。您必须包含 CSS 文件，否则将不会导入字形图标，并且您的组件将不会显示任何内容。

【讨论】：

要补充一个可以解决此问题的原因是您可能有一个引导 css 的本地副本，它指向字体的 cdn 版本。您必须正确下载引导程序并在代码中包含字体文件夹才能使其在本地工作。

【解决方案2】：

我相信 react-bootstrap 不包含 glyphicons 组件，（我已经检查了那里的组件：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">

这应该可以解决问题，而无需第二次导入整个引导 css。

【讨论】：

【解决方案3】：

Bootstrap 在 v4 中放弃了 Glyphicon 支持 https://getbootstrap.com/docs/4.0/migration/#components

【讨论】：

他们为什么放弃一切美好的东西。