我正在使用 React Bootstrap 的 Glyphicon
组件,但没有显示任何字形。到目前为止,这是我的代码:
索引.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"
}
}
最佳答案
这是因为 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 文件,否则字形将不会被导入,您的组件将不会显示任何内容。
关于javascript - 为什么我的 React Bootstrap Glyphicons 没有显示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43928821/