Change Bootstrap-Table Icon

As a start, I would like to change one of the FontAwesome icon on the button in the Bootstrap-Table. For example, I would like to change the columns toggle icon as shown below

I have read the documentation on Bootstrap-Table icons through this link: https://bootstrap-table.com/docs/api/table-options/#icons . However, it seems that I cannot just replace the value on one of the icon properties with the one I want. I tried to create my own custom CSS to manipulate the button's icon to change but to no avail. I have also read other StackOverflow posts regarding this matter, but I cannot follow or understand their solutions. It would be helpful if anyone can provide me a step by step on how to change the FontAwesome icons on one of the buttons in the Bootstrap-Table table. Thanks!

I tried to change the column toggle icon by replacing its value in the table-options.md file that has the following code.

icons

• Attribute: data-icons

• Type: Object

• Detail:

  Defines icons used in the toolbar, pagination, and details view.

• Default:

  {% highlight html %} { paginationSwitchDown: 'fa-caret-square-down', paginationSwitchUp: 'fa-caret-square-up', refresh: 'fa-sync', toggleOff: 'fa-toggle-off', toggleOn: 'fa-toggle-on', columns: 'fa-th-list', <------------ Tried to replace this value with 'fa-solid fa-table-columns', for example fullscreen: 'fa-arrows-alt', detailOpen: 'fa-plus', detailClose: 'fa-minus' } {% endhighlight %}

• Example: Table Icons

Unfortunately, nothing changed to the icon.

There is an example of using another icon set in the Bootstrap Table docs. This example uses ionicons.

Also, I think the docs are outdated in terms of using FontAwesome. I believe it actually uses Bootstrap Icons by default.