You can see result of usage Buttons Shortcode below:
Donate Download Add to Basket Google Play Apple Store
Find Us on Facebook Follow Me My Portfolio My Flickr Profile Find Me on LinkedIn
Shortcodes
Following Buttons Shortcode can be used for adding of a simple icon button:
[fac_button icon="facebook" name="button_1" title="Find Us on Facebook" link="http://www.facebook.com" target="_blank"]
Buttons Shortcode with additional attributes for icon button with text:
Find Us on Facebook
[fac_button icon="facebook" name="button_1" title="Find Us on Facebook" link="http://www.facebook.com" text=" Find Us on Facebook"]
[fac_button icon="facebook" name="button_1" title="Find Us on Facebook" link="http://www.facebook.com" text=" Find Us on Facebook"]
Buttons Shortcode with additional attributes can be used for adding icon button with text customization:
Find Us on Facebook
[fac_button icon="facebook" name="button_1" title="Find Us on Facebook" link="http://www.facebook.com" text=" Find Us on Facebook " background="#0d47a1" color="#ffffff" border_radius="4px" border_width="4px" border_color="#0d47a1"]
[fac_button icon="facebook" name="button_1" title="Find Us on Facebook" link="http://www.facebook.com" text=" Find Us on Facebook " background="#0d47a1" color="#ffffff" border_radius="4px" border_width="4px" border_color="#0d47a1"]
Attributes
| Attribute | Description |
|---|---|
| icon | Font Awesome icon name without “fa-” prefix |
| title | allows to set text for button hover (link “title” attribute) |
| link | allows to set link URL |
| target | allows to set target attribute for the link URL |
| text | allows to set text value that displays at the right side of the icon |
| color | allows to set text and icon color with HEX color value |
| background | allows to set button background color with HEX color value |
| border_width | allows to set button border width, positive digital value with “px” |
| border_color | allows to set button border color with HEX color value |
| border_radius | allows to set button corner rounding; one positive digital value with “px” allows to set equal corner rounding for all corners. Also can be used following values (for example): border_radius=”10px 0″ – corner rounding for left-top and right-bottom corners and vice versa border_radius=”0 10px” – corner rounding for right-top and left-bottom corners; border_radius=” 10px 0 0″ – corner rounding for left-top corner etc. For more references check “border-radius” CSS property. |
| name | allows to set unique button name (link ID attribute); this parameter can be used for development purpose (e.g. JavaScript). |