Search code examples
bootstrap-table

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

enter image description here

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.

Solution

  • 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.