Dynamic Tabs Icons

You can choose from available Pricefx icons to use in your dynamic tabs and steps to add some extra flavor and make them easier to distinguish. “Wizard“ layout does not support displaying icons but always consists of numbered steps.

Example

In this example we define the clipboard-notes icon for the Notes tab:

JSON
{
  "name": "default",
  "tabs": [
   {
      "icon": "clipboard-notes",
      "name": "notes",
      "type": "notes",
      "labelTranslations": {
        "": "Notes",
        "de": "Notizen",
        "pl": "Notatki"
      }
    },
    ...

Available icons, as of 12.0 Clover Club release are:

angle-double-left.svg
angle-double-left
angle-down-b.svg
angle-down-b
angle-down.svg
angle-down
angle-left-b.svg
angle-left-b
angle-right-b.svg
angle-right-b
angle-right.svg
angle-right
arrow-down.svg
arrow-down
arrow-left.svg
arrow-left
arrow-right.svg
arrow-right
arrow-up.svg
arrow-up
bars.svg
bars
bell.svg
bell
blue.svg
blue
brackets-curly.svg
brackets-curly
browser.svg
browser
calculator-alt.svg
calculator-alt
calculator.svg
calculator
calendar-alt.svg
calendar-alt
calender.svg
calender
chart-growth.svg
chart-growth
chart-line.svg
chart-line
check-circle-solid.svg
check-circle-solid
check-circle.svg
check-circle
check.svg
check
circle.svg
circle
clipboard-notes.svg
clipboard-notes
code-branch.svg
code-branch
cog.svg
cog
comment-alt-message.svg
comment-alt-message
comparison.svg
comparison
compress-arrows.svg
compress-arrows
constructor.svg
constructor
copy.svg
copy
corner-up-left.svg
corner-up-left
corner-up-right.svg
corner-up-right
critical.svg
critical
crosshair.svg
crosshair
crosshairs.svg
crosshairs
dashboard.svg
dashboard
database.svg
database
download-alt.svg
download-alt
ellipsis-h.svg
ellipsis-h
english-to-chinese.svg
english-to-chinese
enter.svg
enter
equal-circle.svg
equal-circle
exclamation-circle-solid.svg
exclamation-circle-solid
exclamation-circle.svg
exclamation-circle
exclamation-octagon-solid.svg
exclamation-octagon-solid
exclamation-octagon.svg
exclamation-octagon
exclamation-triangle-solid.svg
exclamation-triangle-solid
exclamation-triangle.svg
exclamation-triangle
expand-alt.svg
expand-alt
exposure-increase.svg
exposure-increase
external-link-alt.svg
external-link-alt
eye.svg
eye
file-check-alt.svg
file-check-alt
file-copy-alt.svg
file-copy-alt
file-edit-alt.svg
file-edit-alt
file-info-alt.svg
file-info-alt
file-plus-alt.svg
file-plus-alt
file.svg
file
filter.svg
filter
focus.svg
focus
folder-medical.svg
folder-medical
folder-open.svg
folder-open
folder.svg
folder
fullscreen-exit.svg
fullscreen-exit
gray.svg
gray
green.svg
green
grip-horizontal-line.svg
grip-horizontal-line
import.svg
import
info-circle.svg
info-circle
key.svg
key
layer-group-slash.svg
layer-group-slash
layer-group.svg
layer-group
link-broken.svg
link-broken
link-h.svg
link-h
message.svg
message
minus-circle.svg
minus-circle
minus-square.svg
minus-square
minus.svg
minus
multiply.svg
multiply
notes.svg
notes
pause.svg
pause
pen.svg
pen
percentage.svg
percentage
play.svg
play
plus-circle.svg
plus-circle
plus-square.svg
plus-square
plus.svg
plus
process.svg
process
puzzle-piece.svg
puzzle-piece
question-circle.svg
question-circle
question.svg
question
red.svg
red
redo.svg
redo
retweet.svg
retweet
save.svg
save
search-minus.svg
search-minus
search.svg
search
setting.svg
setting
sliders-v-alt.svg
sliders-v-alt
sort-amount-down.svg
sort-amount-down
sort-amount-up.svg
sort-amount-up
sync.svg
sync
times-circle-solid.svg
times-circle-solid
times-circle.svg
times-circle
times.svg
times
trash-alt.svg
trash-alt
upload-alt.svg
upload-alt
upload.svg
upload
user.svg
user
wrench.svg
wrench
x-add.svg
x-add
yellow.svg
yellow