Available with Extra Shortcodes add-on.

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

[su_icon icon="icon: star" background="#eeeeee" color="#F73F43" text_color="#F73F43" size="32" shape_size="16" radius="256" text_size="16" url="https://getshortcodes.com/shortcodes/icon/" target="self"] This is a custom icon [/su_icon]

<hr />

[su_icon icon="icon: angle-double-down" background="#31a8e6" color="#ffffff" text_color="#31a8e6" shape_size="4" radius="8" url="https://getshortcodes.com/shortcodes/icon/" target="self"]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="https://getshortcodes.com/shortcodes/icon/" target="self"]Need Support? Call Us![/su_icon]
Option name Possible values Default 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 256 32
shape_size
Background shape size (px)
Number from 4 to 256 16
radius
Icon background shape radius (px)
Number from 0 to 256 256
text_size
Icon text size (px)
Number from 4 to 80 16
margin
Icon margin (px), [top right bottom left]
Any text value 0px 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