Icon
Button icon related options comes under this tab.
Available Options:
| Field Label | Field Type | Short Code Attribute | Default Value | Available Values | Description |
|---|---|---|---|---|---|
| Main | |||||
| Icon | select | icon | - | All Font Awesome Icons | Select the desired icon. Icon will be placed to the left of primary text if it is not already aligned. |
| Size | range | Icon_size | - | - | Add font size in pixels. This will make the icon bigger or smaller depending up on the value. Best is to keep the icon size similar to primary text size. |
| Alignment | select | icon_alignment | - | none, left, right | Align the icon as required. Left moves the icon to the left of button and right moves the icon right of the button. |
| Position | range | icon_position | - | - | Position the icon vertically. More the value more the icon will move vertically downwards. You can also specify negative values to move icon upwards. |
| Color | |||||
| Normal | colorpicker | icon_color_normal | - | - | Select icon color. |
| Hover | colorpicker | icon_color_hover | - | - | Select icon color for when button is hovered. |
| Image | |||||
| Icon Image | file | icon_image_normal | - | - | Select or upload icon image. |
| Shadow | |||||
| Horizontal | range | icon_shadow_horizontal | - | - | Add position of the horizontal shadow in pixels. Adds horizontal shadow to icon. |
| Vertical | range | icon_shadow_vertical | - | - | Add position of the vertical shadow in pixels. Adds vertical shadow to icon. |
| Blur | range | icon_shadow_blur | - | - | Add blur radius in pixels. Makes icon shadow blurry. |
| Color | colorpicker | icon_shadow_color | - | - | Pick icon shadow color. |
| Divider | |||||
| Position | select | icon_divider_position | - | none, left, right | Select divider position. Position the divider to left or right of icon. |
| Size | range | icon_divider_size | - | - | Add divider size in pixels. This will make the divider bigger or smaller depending up on the value. Best is to keep the divider size little smaller or equal to icon size. |
| Color | colorpicker | icon_divider_color | - | - | Select divider color. |
| Animation | |||||
| Animation | select | icon_animation | - | none, click, hover | Select when to animate the icon, on button click or when button is hovered. |
| Animation Type | select | icon_animation_type | - | all animate.css options | Select type of animation. Choose from many different types. |
| Padding | |||||
| Top | range | icon_padding_top | 0 | - | Set top padding for icon. |
| Bottom | range | icon_padding_bottom | 0 | - | Set bottom padding for icon. |
| Left | range | icon_padding_left | 0 | - | Set left padding for icon. |
| Right | range | icon_padding_right | 0 | - | Set right padding for icon. |