Total comes with its own built-in icon set that you can use anywhere on your site. These icons are based on the FontAwesome library but have been renamed as Ticons to avoid conflicts with third-party plugins and improve overall performance.
Many theme elements allow you to display icons directly, but for areas of your site or within child theme files where this isn’t built in, you can use the Ticon shortcode to add icons.
Here’s an example of using the shortcode. The only required parameter is icon, which should match the name listed on the theme icons list.
[ticon icon="bolt" size="" margin_right="" margin_left="" margin_bottom="" margin_top="" color=""]
Easily Find an Icon Shortcode
Did you know you can go to the Theme Icons List and click on any icon to quickly view and copy it’s shortcode or dynamic variable?
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 |