Available with Extra Shortcodes add-on.

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

Panel content
Panel content
Panel content
Panel content
[su_icon_panel url="https://getshortcodes.com/shortcodes/icon_panel/"]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]
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