This shortcode is available with the Extra Shortcodes add-on.

Panel content
[su_icon_panel url="#"]Panel content[/su_icon_panel]
Panel content
Panel content
Panel content
[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]

Description

This shortcode allows you to create beautiful panels with icons on top.

Options

Option namePossible valuesDefault value
background
Panel background color
#HEX color#ffffff
color
Panel text color
#HEX color#333333
border
Panel border
CSS border shorthand property1px solid #cccccc
shadow
Panel shadow
CSS box/text-shadow shorthand property0 1px 2px #eeeeee
radius
Panel border radius (px)
Number from 0 to 600
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.pngicon: 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 32024
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 –