Icons and List Shortcodes

Add icons in the form of single icons, sets, lists, buttons and more. Icons are added using the Font Awesome library as well as extra icons added to supplement this library. The examples below show the usage for each method and the resulting image style.

[hr]

Icons (HTML – Recommended)

Use HTML to insert icons as an individual image.

[code]<i class=”icon-home” style=”color: #FF5D5D”></i>[/code]

Use HTML to insert icons as an individual link.

[code]<a href=”http://mysite.com”><i class=”icon-home”></i></a>[/code]

See all icons

[hr]

Icons (shortcode)

Use a shortcode to insert icons as an individual image.

[code][i class=”icon-home”][/code]

[clear]

Use a shortcode to insert icons with custom colors.

[code][i class=”icon-home” color=”#F55″][/code]

[clear]

Use a shortcode to insert icons as an individual link.

[code][i class=”icon-home” link=”http://mysite.com”][/code]

See all icons

[clear]

Parameters

class

(string) The image icon. When using shortcodes the “icon-” prefix can be omitted.

See all icon values

color

(string) (Optional) The text color for the button. Any CSS color value can be used.

size

(int) (Optional) The icon size in pixels. Default or unset will use font size.

link

(string) (Optional) URL of the link for the icon.

title

(string) (Optional) Title attribute.

target

(string) (Optional) Link target attribute: blank, new, etc.

[clear]

More examples

[clear]

See all icons

[clear]
[hr]

Bullet Lists (HTML – Recommended)

Insert a custom bullet list as HTML with the bullet icon style of your choice.

[clear]

[code]<ul class=”icons”>
<li><i class=”icon-ok icon-large” style=”color: #7D9E3C”></i> Your list icons</li>
<li><i class=”icon-check icon-large” style=”color: #7D9E3C”></i> A custom icon list</li>
<li><i class=”icon-file icon-large”></i> Use any icon</li>
<li><i class=”icon-plus-sign icon-large”></i> Very useful!</li>
</ul>
[/code]

See all icons

[hr]

Bullet Lists (shortcode)

Insert a custom bullet list with the bullet style of your choice from a shortcode.

[clear]

[code][bullet_list class=”icon-ok” color=”#5E9FA3″ size=”large”]
<ul>
<li>Your Item Text</li>
<li>Your Item Text</li>
<li>Your Item Text</li>
<li>Your Item Text</li>
</ul>
[/bullet_list]
[/code]

See all icons

[clear]

Parameters

class

(string) The image icon. When using shortcodes the “icon-” prefix can be omitted.

See all icon values

indent

(string) (Optional) Left margin of list. Example values: “1em”, “10px”

color

(string) (Optional) The text color for the button. Any CSS color value can be used.

size

(string) (Optional) You can increase the size of the bullet icon. Values: large, 2x, 3x, 4x

[clear]
[clear]

See all icons