Skip to content

Theme Icon (ticon) Shortcode

Total includes it’s own built-in icon set that you can use throughout your site. These icons were originally taken from the FontAwesome script but renamed into “Ticons” to prevent any conflicts with 3rd party plugins and to better optimize things. You can use the icons freely via HTML, however, if you want to add icons to parts of the site where you normally couldn’t it’s best to use the shortcode to ensure full compatibility with future theme updates.

Below is a sample usage for the shortcode, the ONLY parameter that is required is the “icon” parameter which is the name as defined on the FontAwesome website.

[ticon icon="bolt" size="" margin_right="" margin_left="" margin_bottom="" margin_top="" color=""]

Where do I locate the icon names?

You can locate a list of all the icon names from the page here.

Shortcode Attributes:

The ticon shortcode supports the following attributes:

Attributes Description Default
icon A theme icon name.
link A valid URL to add a link to your icon.
link_title Title attribute for your link.
link_target A link target attribute such as: blank, self, parent, top
link_rel A link rel attribute such as: nofollow, sponsored
margin_right Adds a right margin to the icon.
margin_left Adds a left margin to the icon.
margin_start Adds an inline-start margin to the icon.
margin_end Adds an inline-end margin to the icon.  
margin_top Adds a top margin to the icon.  
margin_bottom Adds a bottom margin to the icon.
color Adds a custom color to your icon. Any value is allowed including hex, rgba, CSS variables, the word “accent”, currentColor, etc.
size A custom font size for your icon. Any value is allowed including theme icon size prefixes: 2xs, xs, sm, lg, xl, 2xl.
class Custom class or space separated classes to add to the element.
bidirectional Whether the icon should flip horizontally on RTL mode. True or False. false
Back To Top