This shortcode is available in Shortcodes Ultimate Pro
[su_icon_panel url="#"]Panel content[/su_icon_panel]
[su_row] [su_column size="1/3"] [su_icon_panel icon="icon: star" icon_size="40" icon_color="#31a8e6"]Panel content[/su_icon_panel] [/su_column] [su_column size="1/3"] [su_icon_panel icon="icon: cog" icon_size="40" icon_color="#ff5e3a"]Panel content[/su_icon_panel] [/su_column] [su_column size="1/3"] [su_icon_panel icon="icon: flask" icon_size="40" icon_color="#0fe2b8"]Panel content[/su_icon_panel] [/su_column] [/su_row]
This shortcode allows you to create beautiful panels with icons on top.
| Option name | Possible values | Default value |
|---|---|---|
| background Panel background color | #HEX color | #ffffff |
| color Panel text color | #HEX color | #333333 |
| border Panel border | CSS border shorthand property | 1px solid #cccccc |
| shadow Panel shadow | CSS box/text-shadow shorthand property | 0 1px 2px #eeeeee |
| radius Panel border radius (px) | Number from 0 to 60 | 0 |
| text_align Text alignment for panel content | left (Left) center (Center) right (Right) | center |
| icon Select the icon for this panel | FontAwesome icon name (with “icon:” prefix) or icon image URL. Examples: icon: star, http://example.com/icon.png | icon: heart |
| icon_color Select icon color. This color will be aplied only to built-in icons. Does not works for uploaded icons | #HEX color | #333333 |
| icon_size Select icon size (px) | Number from 10 to 320 | 24 |
| url You can type here any hyperlink to make this panel clickable | Any text value | – none – |
| class Additional CSS class name(s) separated by space(s) | CSS class name(s) separated by space(s) | – none – |