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;