Icon

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:

  • sml = small
  • med = medium
  • lrg = large
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-prime = theme Primary color
  • style-red = Red
  • style-orange = Orange
  • style-blue = Blue
  • style-green = Green
  • style-light = theme Light color
  • style-dark = theme Dark color
  • style-inherit = Color Inherited
style_image drk style_image="lgt" If you are using the image icon, you can choose a light or dark icon:

  • lgt = light
  • drk = dark
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:

  • (empty) – Inline
  • left
  • right
  • center
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"]

Still having trouble? Head over to the forums.

Forums