react-bootstrap-table:无法在自定义工具栏按钮上设置glyphicon

时间:2018-04-19 16:36:24

标签: javascript html glyphicons react-bootstrap-table

我正在按照此示例自定义表格的工具栏:http://allenfang.github.io/react-bootstrap-table/custom.html#insertBtn

我可以看到我的按钮,但不能看到我用btnGlyphicon设置的图标。

生成的html为<i class="fa glyphicon glyphicon-edit"></i>类中是否还有fa + glyphicon?我添加了font-awesome作为依赖项,但我仍然看不到图标。

我错过了什么?

任何帮助表示赞赏

import React from 'react';

import {
	BootstrapTable, TableHeaderColumn, 
	ButtonGroup, Button, InsertButton
} from 'react-bootstrap-table';
import './../node_modules/react-bootstrap-table/dist/react-bootstrap-table-all.min.css';
import './../node_modules/bootstrap/dist/css/bootstrap.min.css';


createCustomButtonGroup(props) {
		return (
		  <ButtonGroup className='my-custom-class' sizeClass='btn-group-md'>
			{ props.exportCSVBtn }
			<InsertButton 
			  btnText='Info'
			  className='my-custom-class'
			  btnGlyphicon='glyphicon-edit'
			  onClick={ () => this.changeInfoFilter() }/>
			<InsertButton 
			  btnText='Warning'
			  className='my-custom-class'
			  btnGlyphicon='glyphicon-edit'
			  onClick={ () => this.changeWarningFilter() }/>
			<InsertButton
			  btnText='Error'
			  className='my-custom-class'
			  btnGlyphicon='glyphicon-edit'
			  onClick={ () => this.changeErrorFilter() }/>
			<InsertButton 
			  btnText='Command'
			  className='my-custom-class'
			  btnGlyphicon='glyphicon-edit'
			  onClick={ () => this.changeCommandFilter() }/>
		  </ButtonGroup>
		);
	}

1 个答案:

答案 0 :(得分:0)

显然这是一个已知的问题,glyphicons不在bootstrap 4中: https://getbootstrap.com/docs/4.0/migration/