[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 in Shortcodes Ultimate Pro
This shortcode allows you to create various icons (including FontAwesome icons).
| 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 – |