Choose an icon to show on your site, we have many to choose from two great icon sets. Icon Sweets are retina ready images and FontAwsome is an icon font, which gives you more flexibility with color and size. See examples here.
| Option | Default | Example | Description |
|---|---|---|---|
| icon | (empty) | icon="fa-lightbulb-o" | Choose an icon from the list. You can also find all the FontAwesome classes on the Cheatsheet page. |
| character | (empty) | character="T" | Add text to show instead of an icon. |
| size_image | sml | size_image="lrg" | If you have selected to use an image icon, you will have three choices of size:
|
| font_size | 13 | font_size="25" | If you have selected to use a font icon, you can enter a font size (in pixels). |
| color | style-prime | style="style-red" | Choose a color for the icon:
|
| style_image | drk | style_image="lgt" | If you are using the image icon, you can choose a light or dark icon:
|
| boxed | 0 | boxed="1" | The icon will be displayed in a box. |
| round | 0 | round="1" | This will create a circular icon background. |
| hollow | 0 | hollow="1" | Background will be transparent until hovered. |
| background_animation | (empty) | background_animation="hvr-sweep-to-right" | Add a subtle animation when the item is hovered, use the shortcode generator to see available options. |
| gradient | 0 | gradient="1" | The icon box (if selected) will now have a gradient effect. |
| hover_animation | (empty) | hover_animation="hvr-shrink" | Add an animation when the icon is hovered, use the shortcode generator to see available options. |
| animation | (empty) | animation="fadeIn" | Add an animation when the block comes into view, use the shortcode generator to see available options. |
| animation_delay | (empty) | animation_delay="1500" | The animation will not start until this number of milliseconds after the element comes into view (1000 milliseconds = 1 second). |
| animation_offset | (empty) | animation_offset="200" | If the number is positive, the animation will start when the element is this number of pixels below the viewport. If the number is negative, the animation will not start until the element is this number of pixels inside the viewport. |
| description | (empty) | description="This is my icon" | This will be shown when the user hovers over the icon. |
| position | (empty) | position="right" | Choose an alignment for the icon:
|
| margin_top | (empty) | margin_top="10px" | Add a pixel or percent value for the CSS margin-top value. |
| margin_right | (empty) | margin_right="10px" | Add a pixel or percent value for the CSS margin-right value. |
| margin_bottom | (empty) | margin_bottom="10px" | Add a pixel or percent value for the CSS margin-bottom value. |
| margin_left | (empty) | margin_left="10px" | Add a pixel or percent value for the CSS margin-left value. |
| link | (empty) | link="http://www.example.com/page" | Use the icon as a link; enter a URL. |
| button_external | 0 | button_external="1" | Link opens in a new tab/window. |
| class | (empty) | class="my-icon" | Add additional classes to the icon. |
Examples
[icon icon="icon-heart"]
[icon icon="icon-heart" color="style-light" boxed="1" animation="fadeInUp"]