Application Buttons

Default +3 Edit 11 Reload Mailbox 6+ Shop

Default Buttons

Button with Icons

Button Sizing

Disabled Buttons


SupportPay Custom Buttons

In cases where input elements are used to represent buttons the following buttons need to be used in order for the icons to appear correctly on the button

For input type="button" use the following code to add the icon to the button

<span class="input-icon">
<input type="button" class="btn btn-warning" value="Save">
<i class="button-icon fa fa-save "></i>
</span>

Examples - Buttons

Input type="button" in btn-toolbar or Footer

Children
First
Last
Birthdate
Gender
Action

Examples - Small Buttons

For input type="button" use the following code to add the icon to the SMALL button

<span class="input-icon">
<input type="button" class="btn btn-warning" value="Save">
<i class="button-icon-sm fa fa-save "></i>
</span>




Lables & Badges

Default Success Warning Danger Info Inverse

Default Success Warning Danger Info Inverse

1 1 2 4 6 8 10 2

Large Yellow

Larger Grey Light

Smaller

Pagination


369 Scalable FontAwesome Icons (see all icons )

  • fa-adjust
  • fa-asterisk
  • fa-ban
  • fa-bar-chart-o
  • fa-barcode
  • fa-flask
  • fa-beer
  • fa-bell-o
  • fa-bell
  • fa-bolt
  • fa-book
  • fa-bookmark
  • fa-bookmark-o
  • fa-briefcase
  • fa-bullhorn
  • fa-calendar
  • fa-camera
  • fa-camera-retro
  • fa-certificate
  • fa-check-square-o
  • fa-square-o
  • fa-circle
  • fa-circle-o
  • fa-cloud
  • fa-cloud-download
  • fa-cloud-upload
  • fa-coffee
  • fa-cog
  • fa-cogs
  • fa-comment
  • fa-comment-o
  • fa-comments
  • fa-comments-o
  • fa-credit-card
  • fa-tachometer
  • fa-desktop
  • fa-arrow-circle-o-down
  • fa-download
  • fa-pencil-square-o
  • fa-envelope
  • fa-envelope-o
  • fa-exchange
  • fa-exclamation-circle
  • fa-external-link
  • fa-eye-slash
  • fa-eye
  • fa-video-camera
  • fa-fighter-jet
  • fa-film
  • fa-filter
  • fa-fire
  • fa-flag
  • fa-folder
  • fa-folder-open
  • fa-folder-o
  • fa-folder-open-o
  • fa-cutlery
  • fa-gift
  • fa-glass
  • fa-globe
  • fa-users
  • fa-hdd-o
  • fa-headphones
  • fa-heart
  • fa-heart-o
  • fa-home
  • fa-inbox
  • fa-info-circle
  • fa-key
  • fa-leaf
  • fa-laptop
  • fa-gavel
  • fa-lemon-o
  • fa-lightbulb-o
  • fa-lock
  • fa-unlock

SupportPay Additional Icons

For SupportPay Icons: <i class="ace-icon icon-iconname"</i>

Example:

									<i class="ace-icon icon-pending"</i>
								
  • icon-pending
  • icon-money-bag
  • icon-payment
  • icon-percent
  • icon-one
  • icon-two
  • icon-three
  • icon-four