Admin/Extensions/toolbar_icons

Toolbar Icons Extension

This extension will search for specific-class elements inside a container and will prepend them with a new <i> element that has the corresponding FontAwesome icon. By doing so you can dynamically inject icons into existing toolbar items by setting the required classes.

In the following list you can see the relations between the classes and their icons:

• btn-edit: fa-pencil
• btn-editdoc: fa-pencil
• btn-view: fa-eye
• btn-delete: fa-trash-o
• btn-order: fa-shopping-cart
• btn-caret: fa-caret-right
• btn-folder: fa-folder-open
• btn-multi-action: fa-check-square-o
• btn-cash: fa-money
• btn-add: fa-plus

Options

The extension contains additional options that can be used to modify the display of the icons. You can use them together at the same time.

Large Icons | data-toolbar_icons-large | Boolean | Optional

This option will add the "fa-lg" class to the icons which will make them bigger.

<div class="container" data-gx-extension="toolbar_icons" data-toolbar_icons-large="true">
  <button class="btn-edit"></button>
</div>

Fixed Width | data-toolbar_icons-fixedwidth | Boolean | Optional

This option will add the "fa-fw" class to the icons which will keep the icon width fixed.

<div class="container" data-gx-extension="toolbar_icons" data-toolbar_icons-fixedwidth="true">
  <button class="btn-view"></button>
</div>

Example

After the engine is initialized the following button elements will contain the corresponding FontAwesome icons.

<div class="container" data-gx-extension="toolbar_icons">
  <button class="btn-edit">&nbsp;Edit</button>
  <button class="btn-view">&nbsp;View</button>
  <button class="btn-order">&nbsp;Buy Item</button>
</div>

Note that the use of   is required only if you want to add some space between the icon and the text. You can avoid it by styling the margin space between the icon and the text.

FontAwesome provides many helper classes that can be used directly on the elements in order to adjust the final visual result. Visit the follow link for more examples and sample code. https://fortawesome.github.io/Font-Awesome/examples