Converted to Font Awesome from Glyphicon

gforge · gforge · commit 0d2a48d843dc · 2016-10-17T22:00:12.000+02:00
diff --git a/README.md b/README.md
@@ -118,7 +118,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
@@ -6,6 +6,7 @@
     <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://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"></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/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;

Original file line number	Diff line number	Diff line change
`@@ -118,7 +118,7 @@ var products = [{`
`118`	`118`	`},........];`
`119`	`119`	`// It's a data format example.`
`120`	`120`	`function priceFormatter(cell, row){`
`121`		`- return '<i class="glyphicon glyphicon-usd"></i> ' + cell;`
	`121`	`+ return '<i class="fa fa-usd"></i> ' + cell;`
`122`	`122`	`}`
`123`	`123`
`124`	`124`	`React.render(`
Original file line number	Diff line number	Diff line change
`@@ -165,7 +165,7 @@ class RegionsEditor extends React.Component {`
`165`	`165`	`}`
`166`	`166`
`167`	`167`	`function priceFormatter(cell, row) {`
`168`		- return `<i class='glyphicon glyphicon-${cell.currency.toLowerCase()}'></i> ${cell.amount}`;
	`168`	+ return `<i class='fa fa-${cell.currency.toLowerCase()}'></i> ${cell.amount}`;
`169`	`169`	`}`
`170`	`170`
`171`	`171`	`const regionsFormatter = (cell, row) => (<span>{ (cell \|\| []).join(',') }</span>);`
Original file line number	Diff line number	Diff line change
`@@ -22,7 +22,7 @@ addProducts(5);`
`22`	`22`
`23`	`23`
`24`	`24`	`function priceFormatter(cell, row) {`
`25`		- return `<i class='glyphicon glyphicon-usd'></i> ${cell}`;
	`25`	+ return `<i class='fa fa-usd'></i> ${cell}`;
`26`	`26`	`}`
`27`	`27`
`28`	`28`