简体   繁体   中英

react-bootstrap-table: cannot set a glyphicon on a custom toolbar button

I am customizing the toolbar of a table, following this example: http://allenfang.github.io/react-bootstrap-table/custom.html#insertBtn

I can see my buttons, but not the icons that I set with btnGlyphicon.

The generated html is <i class="fa glyphicon glyphicon-edit"></i> Are both fa + glyphicon expected in the class ? I added font-awesome as a dependency, but I still cannot see the icon.

What am I missing?

Any help appreciated

 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> ); } 

显然这是一个已知问题,引导程序4中没有glyphicons: https ://getbootstrap.com/docs/4.0/migration/

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM