AllenFang · gforge · Oct 17, 2016 · Oct 17, 2016 · Oct 17, 2016 · Oct 17, 2016
diff --git a/README.md b/README.md
@@ -104,6 +104,13 @@ Finally, you need to import the css file to your app, there are two css file you
 ```
 The CSS files you can find in the css folder.
 
+### d.Font Awesome js
+The package uses since v 3.0 [Font Awesome](http://fontawesome.io/) for icons. In order to install you must get a CDN [by registering](http://fontawesome.io/get-started/) or use the [font-awesome package](https://www.npmjs.com/package/font-awesome). Then in the header you need to add (use your own js-link instead of the `???`):
+
+```html
+ <script src="https://use.fontawesome.com/???.js"></script>
+```
+
 ### Quick Demo
 ```js
 // products will be presented by react-bootstrap-table
@@ -118,7 +125,7 @@ var products = [{
  },........];
 // It's a data format example.
 function priceFormatter(cell, row){
- return '<i class="glyphicon glyphicon-usd"></i> ' + cell;
+ return '<i class="fa fa-usd"></i> ' + cell;
 }
 
 React.render(

diff --git a/examples/index.html b/examples/index.html
@@ -5,7 +5,7 @@
  <title>react-bootstrap-table demo</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
  <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.js"></script>
+ <script src="https://use.fontawesome.com/f52b8fd2c4.js"></script>
 </head>
 <body>
  <div id="root"></div>

diff --git a/examples/js/cell-edit/custom-cell-edit-table.js b/examples/js/cell-edit/custom-cell-edit-table.js
@@ -165,7 +165,7 @@ class RegionsEditor extends React.Component {
 }
 
 function priceFormatter(cell, row) {
- return `<i class='glyphicon glyphicon-${cell.currency.toLowerCase()}'></i> ${cell.amount}`;
+ return `<i class='fa fa-${cell.currency.toLowerCase()}'></i> ${cell.amount}`;
 }
 
 const regionsFormatter = (cell, row) => (<span>{ (cell || []).join(',') }</span>);

diff --git a/examples/js/column-format/html-column-format-table.js b/examples/js/column-format/html-column-format-table.js
@@ -22,7 +22,7 @@ addProducts(5);
 
 
 function priceFormatter(cell, row) {
- return `<i class='glyphicon glyphicon-usd'></i> ${cell}`;
+ return `<i class='fa fa-usd'></i> ${cell}`;
 }
 
 

diff --git a/examples/js/custom/csv-button/default-custom-csv-button.js b/examples/js/custom/csv-button/default-custom-csv-button.js
@@ -36,7 +36,7 @@ export default class DefaultCustomExportButtonTable extends React.Component {
  btnText='CustomExportText'
  btnContextual='btn-danger'
  className='my-custom-class'
- btnGlyphicon='glyphicon-edit'
+ btnFAwesome='fa-edit'
  onClick={ e => this.handleExportCSVButtonClick(onClick) }/>
  );
  // If you want have more power to custom the child of ExportCSVButton,

diff --git a/examples/js/custom/delete-button/default-custom-delete-button.js b/examples/js/custom/delete-button/default-custom-delete-button.js
@@ -36,7 +36,7 @@ export default class DefaultCustomInsertButtonTable extends React.Component {
  btnText='CustomDeleteText'
  btnContextual='btn-success'
  className='my-custom-class'
- btnGlyphicon='glyphicon-edit'
+ btnFAwesome='fa-edit'
  onClick={ e => this.handleDeleteButtonClick(onClick) }/>
  );
  // If you want have more power to custom the child of DeleteButton,

diff --git a/examples/js/custom/insert-button/default-custom-insert-button.js b/examples/js/custom/insert-button/default-custom-insert-button.js
@@ -36,7 +36,7 @@ export default class DefaultCustomInsertButtonTable extends React.Component {
  btnText='CustomInsertText'
  btnContextual='btn-warning'
  className='my-custom-class'
- btnGlyphicon='glyphicon-edit'
+ btnFAwesome='fa-edit'
  onClick={ () => this.handleInsertButtonClick(onClick) }/>
  );
  // If you want have more power to custom the child of InsertButton,

diff --git a/examples/js/manipulation/search-format-table.js b/examples/js/manipulation/search-format-table.js
@@ -10,7 +10,7 @@ const products = [];
 function addProducts(quantity) {
  const startId = products.length;
  const pname = [ 'Cloud Service', 'Message Service', 'Add Service', 'Edit Service', 'Money' ];
- const icons = [ 'glyphicon-cloud', 'glyphicon-envelope', 'glyphicon-plus', 'glyphicon-pencil', 'glyphicon-euro' ];
+ const icons = [ 'fa-cloud', 'fa-envelope', 'fa-plus', 'fa-pencil', 'fa-euro' ];
  const types = [ 'Cloud', 'Mail', 'Insert', 'Modify', 'Money' ];
  const years = [ 2005, 2006, 2008, 2001, 2015 ];
  for (let i = 0; i < quantity; i++) {
@@ -36,7 +36,7 @@ function filterType(cell, row) {
 }
 
 function nameFormatter(cell) {
- return `<p><span class='glyphicons ${cell.icon}' aria-hidden='true'></span> ${cell.pname}, from ${cell.year}</p>`;
+ return `<p><i class='fa fa-${cell.icon}'></i> ${cell.pname}, from ${cell.year}</p>`;
 }
 
 function priceFormatter(cell) {

diff --git a/package.json b/package.json
@@ -54,7 +54,7 @@
  "react-bootstrap": "^0.29.5",
  "react-dom": "^0.14.3 || ^15.0.0",
  "react-hot-loader": "^1.3.0",
- "react-router": "^1.0.2",
+ "react-router": "^2.8.1",
  "style-loader": "^0.13.0",
  "toastr": "^2.1.2",
  "vinyl-source-stream": "^1.1.0",
@@ -64,8 +64,8 @@
  },
  "dependencies": {
  "classnames": "^2.1.2",
- "react-toastr": "^2.8.0",
- "react-modal": "^1.4.0"
+ "react-modal": "^1.4.0",
+ "react-toastr": "^2.8.0"
  },
  "peerDependencies": {
  "react": "^0.14.3 || ^15.0.0"

diff --git a/src/toolbar/DeleteButton.js b/src/toolbar/DeleteButton.js
@@ -9,13 +9,13 @@ class DeleteButton extends Component {
  btnContextual,
  className,
  onClick,
- btnGlyphicon,
+ btnFAwesome,
  btnText,
  children,
  ...rest
  } = this.props;
  const content = children ||
- (<span><i className={ `glyphicon ${btnGlyphicon}` }></i> { btnText }</span>);
+ (<span><i className={ `fa ${btnFAwesome}` }></i> { btnText }</span>);
  return (
  <button type='button'
  className={ `btn ${btnContextual} ${deleteBtnDefaultClass} ${className}` }
@@ -32,14 +32,14 @@ DeleteButton.propTypes = {
  btnContextual: PropTypes.string,
  className: PropTypes.string,
  onClick: PropTypes.func,
- btnGlyphicon: PropTypes.string
+ btnFAwesome: PropTypes.string
 };
 DeleteButton.defaultProps = {
  btnText: Const.DELETE_BTN_TEXT,
  btnContextual: 'btn-warning',
  className: '',
  onClick: undefined,
- btnGlyphicon: 'glyphicon-trash'
+ btnFAwesome: 'fa-trash'
 };
 
 export default DeleteButton;
diff --git a/src/toolbar/ExportCSVButton.js b/src/toolbar/ExportCSVButton.js
@@ -9,13 +9,13 @@ class ExportCSVButton extends Component {
  btnContextual,
  className,
  onClick,
- btnGlyphicon,
+ btnFAwesome,
  btnText,
  children,
  ...rest
  } = this.props;
  const content = children ||
- (<span><i className={ `glyphicon ${btnGlyphicon}` }></i> { btnText }</span>);
+ (<span><i className={ `fa ${btnFAwesome}` }></i> { btnText }</span>);
  return (
  <button type='button'
  className={ `btn ${btnContextual} ${exportCsvBtnDefaultClass} ${className} hidden-print` }
@@ -32,14 +32,14 @@ ExportCSVButton.propTypes = {
  btnContextual: PropTypes.string,
  className: PropTypes.string,
  onClick: PropTypes.func,
- btnGlyphicon: PropTypes.string
+ btnFAwesome: PropTypes.string
 };
 ExportCSVButton.defaultProps = {
  btnText: Const.EXPORT_CSV_TEXT,
  btnContextual: 'btn-success',
  className: '',
  onClick: undefined,
- btnGlyphicon: 'glyphicon-export'
+ btnFAwesome: 'fa-arrow-circle-down'
 };
 
 export default ExportCSVButton;
diff --git a/src/toolbar/InsertButton.js b/src/toolbar/InsertButton.js
@@ -9,13 +9,13 @@ class InsertButton extends Component {
  btnContextual,
  className,
  onClick,
- btnGlyphicon,
+ btnFAwesome,
  btnText,
  children,
  ...rest
  } = this.props;
  const content = children ||
- (<span><i className={ `glyphicon ${btnGlyphicon}` }></i>{ btnText }</span>);
+ (<span><i className={ `fa ${btnFAwesome}` }></i> { btnText }</span>);
  return (
  <button type='button'
  className={ `btn ${btnContextual} ${insertBtnDefaultClass} ${className}` }
@@ -32,14 +32,14 @@ InsertButton.propTypes = {
  btnContextual: PropTypes.string,
  className: PropTypes.string,
  onClick: PropTypes.func,
- btnGlyphicon: PropTypes.string
+ btnFAwesome: PropTypes.string
 };
 InsertButton.defaultProps = {
  btnText: Const.INSERT_BTN_TEXT,
  btnContextual: 'btn-info',
  className: '',
  onClick: undefined,
- btnGlyphicon: 'glyphicon-plus'
+ btnFAwesome: 'fa-plus'
 };
 
 export default InsertButton;