[su_icon icon="icon: star" background="#eeeeee" color="#F73F43" text_color="#F73F43" size="32" shape_size="16" radius="256" text_size="16" url="#" target="self" margin="0"] This is a custom icon [/su_icon]
[su_icon icon="icon: angle-double-down" background="#31a8e6" color="#ffffff" text_color="#31a8e6" shape_size="4" radius="8" url="#" target="self" margin="0"]Download archive.zip [5Mb][/su_icon]
[su_icon icon="icon: phone" background="#0fe2b8" color="#FFFBB2" text_color="#0fe2b8" size="20" shape_size="10" radius="0" url="#" target="self" margin="0"]Need Support? Call Us![/su_icon]

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

Description

This shortcode allows you to create various icons (including FontAwesome icons).

Options

Option namePossible valuesDefault value
icon
Choose icon shape
FontAwesome icon name (with “icon:” prefix) or icon image URL. Examples: icon: star, http://example.com/icon.png– none –
background
Icon background color
#HEX color#eeeeee
color
Icon shape color. This color be only applied to the built-in icons
#HEX color#333333
text_color
Pick a color for icon text
#HEX color#333333
size
Icon size (px)
Number from 4 to 25632
shape_size
Background shape size (px)
Number from 4 to 25616
radius
Icon background shape radius (px)
Number from 0 to 256256
text_size
Icon text size (px)
Number from 4 to 8016
margin
Icon margin (px), [top right bottom left]
Any text value0px 20px 20px 0px
url
Icon link
Any text value– none –
target
Choose icon link target
self (Open link in same window/tab)
blank (Open link in new window/tab)
blank
class
Additional CSS class name(s) separated by space(s)
CSS class name(s) separated by space(s)– none –