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.