Javascript 为什么我的 React Bootstrap Glyphicons 不显示？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43928821/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why aren't my React Bootstrap Glyphicons showing?
提问by Peter Tran
I'm using React Bootstrap's Glyphiconcomponent but none of the glyphicons are showing up. Here is my code so far:
我正在使用 React Bootstrap 的Glyphicon组件，但没有显示任何字形。到目前为止，这是我的代码：
Index.js
索引.js
import React from 'react';
import ReactDOM from 'react-dom';
import Global from './components/Global';
ReactDOM.render(
<Global />,
document.getElementById('root')
);
Global.js
全局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;
Here's my package.jsonfile:
这是我的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"
}
}
回答by Andrew Li
This is because Bootstrap uses the font Gylphicon Halflings to display its glyphicons. Bootstrap's CSS must be explicitly included, as it imports the glyphicons, or else the glyphicons will not show up. You could add the bootstrap.min.cssfile to your index.htmlwhich imports it for you:
这是因为 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">
There was an issue raised on GitHubregarding this exact issue. It's not explicitly said that you need to include Bootstrap's CSS, and I ran into this issue before. You have to include the CSS file or else the glyphicons will not be imported and your components will display nothing.
在 GitHub 上提出了一个关于这个确切问题的问题。没有明确说你需要包含 Bootstrap 的 CSS，我之前也遇到过这个问题。您必须包含 CSS 文件，否则将不会导入字形并且您的组件将不显示任何内容。
回答by Mark Hennings
Bootstrap dropped Glyphicon support in v4 https://getbootstrap.com/docs/4.0/migration/#components
Bootstrap 在 v4 中删除了 Glyphicon 支持 https://getbootstrap.com/docs/4.0/migration/#components
回答by Steven Luong C
I believe the react-bootstrap doesn't include the glyphicons component, (I have checked the components there : https://react-bootstrap.github.io/components/alerts/)
我相信 react-bootstrap 不包括 glyphicons 组件，（我已经检查了那里的组件：https://react-bootstrap.github.io/components/alerts/ ）
So you would need to add glyphicons on top of the react-bootstrap package :
所以你需要在 react-bootstrap 包的顶部添加字形：
In the index.html file, add the following line :
在 index.html 文件中，添加以下行：
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
This should solve the issue without importing a second time the whole bootstrap css.
这应该可以解决问题，而无需第二次导入整个引导程序 css。
