Reference to fa-sync iso fa-refresh & Font-Awesome 4

Bootstraptable version(s) affected

1.20.0

Description

Hello

I’m using bootstrap-table 1.20.0 with Font-Awesome 4.7.0 and noticed that the sync icon does not get displayed. The following piece of code seems to have no effect:

window.icons = {
  refresh: 'fa-refresh',
  toggle: 'fa-toggle-on',
  columns: 'fa-th-list',
  export: 'fa-download',
  search: 'fa-search',
  clearSearch: 'fa-trash'
  };

I defined my table using:

data-icons-prefix="fa" 
data-icons="icons" 
data-show-columns="true" 
data-show-refresh="true"
data-search="true"

All icons except refesh are displayed.

in bootstrap-table.js and bootstrap-table.min.js the refresh icon is referenced as fa-sync instead of fa-refresh. Somehow, the litte javascript from the documentation displayed above does not override fa-sync with fa-refresh.

Example(s)

<script type="text/javascript">
  // Fix for missing icons using bootstrap-tables.
  // Use in combination with the following directives: 
  // - data-icons-prefix="fas" 
  // - data-icons="icons" 
  window.icons = {
    refresh: 'fa-refresh',
    toggle: 'fa-toggle-on',
    columns: 'fa-th-list',
    export: 'fa-download',
    search: 'fa-search',
    clearSearch: 'fa-trash'
  };
</script>

<table class="table"
	data-toggle="table" 
	data-url="/api/query/get?table=catalog"
	data-toolbar="#toolbar"
	data-row-style="rowStyle"
	data-id-field="id" 
	data-pagination="true" 
	data-page-size="10"
	data-page-list="[10, 25, 50, 100, All]"  
	data-height="600"
	data-icons-prefix="fa" 
	data-icons="icons" 
	data-show-columns="true" 
	data-show-refresh="true"
	data-search="true"
	data-search-text=""
	data-multi-search=";"
	data-show-search-button="true"
	data-show-search-clear-button="true"
	data-response-handler="responseHandler"
	id="catalogTable">
	<thead>
		<tr>
			<th data-field="Key_Id" data-sortable="true" data-visible="false">Key</th>
			<th data-field="Id" data-sortable="true" data-visible="false">Id</th>
			<th data-field="Manufacturer" data-sortable="true">Vendor</th>
			<th data-field="Name" data-sortable="true" data-switchable="false">Product</th>
			<th data-field="Version" data-sortable="true">Version</th>
		</tr>
	</thead>
</table>

Possible Solutions

To solve this, I replaced the references to fa-sync to fa-refresh. This worked perfectly and does not break anything else as far as I know. Possibly, older Font-Awesome releases will not recognize fa-refresh.

sed -i 's/fa-sync/fa-refresh/' bootstrap-table.js sed -i ‘s/fa-sync/fa-refresh/’ bootstrap-table.min.js

Additional Context

https://github.com/wenzhixin/bootstrap-table/releases/tag/1.20.0 is deployed in my application.

[UtechtDustin]

@Ka7ut0 you’re example has missing the style/link tag for fontawesome 4 (the editor uses fontawesome 5). If you add it, it works fine (check my example).

[UtechtDustin]

No problem, you’re welcome.