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 |