While the plugin provides you with a detailed generator that creates the shortcode and HTML code for your icon, the following is a listing of all shortcode parameters that can be used to create and style your icon.

The most basic shortcode for an icon is:

[TS_TINY_Icon_Font icon="ts-awesome-bell"]

This shortcode will create a bell icon ts-awesome-bell using the Font Awesome font with all default settings. If you want to apply custom settings, use the parameters below:

Use this parameter to add a custom ID to your icon element. The ID can be used to apply custom CSS styling or JavaScript/jQuery functionality to the icon.

Example:

id=”iconID”

Use this parameter to add a custom class name to your icon element. The class name can be used to apply custom CSS styling or JavaScript/jQuery functionality to a group of icons.

Example:

class=”iconClass”

This parameter defines the CSS icon class that represents the selected icon in the selected font. All icon classification follow the same syntax:

ts-…font name…-…icon name

Example:

icon=”ts-awesome-bell”

This parameter defines the size of the icon in px. The default size is 16px so you don’t have to include the size parameter if you want to use the default size. When setting the size, omit the “px” and just use the numeric value.

Example:

size=”30″

This parameter defines the color of the icon. The value must be set as HEX value; the default value is “#000000”, which equals black. When using the default color, the parameter does not have to be provided.

Example:

color=”#5C96BC”

This parameter will define the background color of the icon. By default, this parameter is empty, which equals a transparent background. The value has to be set as HEX value:

Example:

background=”#E00000″

This parameter defines the animation that will be applied to the icon. By default, the parameter is empty. There are two kind of animations that can be applied but you can only apply one of them:

Default Animation

This animation will be applied to the default state of the icon, which means it will be active all the time. The default animation carry the string “infinite” in their respective name.

Example:

animation=”ts-infinite-css-pulse”

Hover Animation

This animation will be applied to the hover state of the icon, which means it will only be active if a user is hovering over the icon with the pointer. The hover animations carry the string “hover” in their respective name.

Example:

animation=”ts-hover-css-flash”

This parameter defines the animation that will be applied to the icon and triggered once the icon element comes into browser view. The animation will be triggered only once. By default, the parameter is empty.

Example:

viewport=”ts-viewport-css-bounceInDown”

This parameter defines how long the viewport animation should be delayed after the icon comes into browser view. Be default, the parameter is “0” (zero) and the value must be entered in ms.

Example:

delay=”2000″

This parameter defines whether the icon will have a border or not. It accepts only two settings “true” or “false”. The default settings is “false”. If set to “true”, the shortcode will accept the following additional parameters, which further define the border: “bordertype”, “borderwidth”, “borderradius” and “bordercolor”. See the corresponding tabs to learn more about these parameters

Example:

bordershow=”true”

bordertype

This parameter defines the type of border you want to apply to the icon element. The default value is “solid”, but there are other options available as well:

Example:

bordertype=”dashed”

Options:

Solid Border = “solid”,
Dotted Border = “dotted”,
Dashed Border = “dashed”,
Double Border = “double”,
Grouve Border = “groove”,
Ridge Border = “ridge”,
Inset Border = “inset”,
Outset Border = “outset”

borderwidth

The parameter defines the width of the border in px. The default value is 1px. Certain border types require a width of more than 1px in order to be displayed correctly; for example, the border type “double” should have a width of at least 3px in order to be displayed correctly. When setting the width, omit the “px” and just use the numeric value.

Example:

borderwidth=”3″

borderradius

This parameter defines if you want to apply rounded corners to your border. The default value is empty, which means no rounded corners will be applied. The radius of the rounded corners is defined by a CSS class

Example:

borderradius=”ts-radius-small”

Options:

None = “”
Small Radius = “ts-radius-small”
Medium Radius = “ts-radius-medium”
Large Radius = “ts-radius-large”
Full Circle = “ts-radius-full”

Note:

The radius in px can be changed by changing the corresponding CSS settings. Without custom changes to the CSS, the following radius will be applied:

“ts-radius-small” = 5px
“ts-radius-medium” = 15px
“ts-radius-large” = 30px
“ts-radius-full” = 50% (equals full circle)

bordercolor

The parameter defines the color of the border. The color has to be set as HEX value and the default color is “#cccccc”. If using the default color, this paramater can be omitted.

Example:

bordercolor=”#1e73be”

This parameter defines the top padding in px that should be applied to the icon element. The default top padding is 0px so you don’t have to include the padding parameter if you want to use the default padding. When setting the padding, omit the “px” and just use the numeric value.

Example:

paddingtop=”10″

This parameter defines the bottompadding in px that should be applied to the icon element. The default bottom padding is 0px so you don’t have to include the padding parameter if you want to use the default padding. When setting the padding, omit the “px” and just use the numeric value.

Example:

paddingbottom=”10″

This parameter defines the left padding in px that should be applied to the icon element. The default leftpadding is 0px so you don’t have to include the padding parameter if you want to use the default padding. When setting the padding, omit the “px” and just use the numeric value.

Example:

paddingleft=”10″

This parameter defines the right padding in px that should be applied to the icon element. The default right padding is 0px so you don’t have to include the padding parameter if you want to use the default padding. When setting the padding, omit the “px” and just use the numeric value.

Example:

paddingright=”10″

This parameter defines the top margin that will be applied to the icon element. The default value is 5px so you don’t have to include the margintop parameter if you want to use the default top margin. When setting the margintop parameter, omit the “px” and just use the numeric value.

Example:

margintop=”15″

This  parameter defines the bottom margin that will be applied to the icon element. The default value is 5px so you don’t have to include the marginbottom parameter if you want to use the default bottom margin. When setting the marginbottom parameter, omit the “px” and just use the numeric value.

Example:

marginbottom=”15″

This parameter defines the left margin that will be applied to the icon element. The default value is 5px so you don’t have to include the marginleft parameter if you want to use the default left margin. When setting the marginleft parameter, omit the “px” and just use the numeric value.

Example:

marginleft=”15″

This parameter defines the right margin that will be applied to the icon element. The default value is 5px so you don’t have to include the marginright parameter if you want to use the default right margin. When setting the marginright parameter, omit the “px” and just use the numeric value.

Example:

marginright=”15″

This parameter defines how the icon element should be placed in relation to the elements around it. It accepts only two values:

Option A: “true”

The icon element will follow the flow of the elements / text that surrounds it, like this example shows it: ts-awesome-chain This is the default setting and therefore doesn’t need to be provided if remaining “true”.

Option B: “false”

When setting the “inline” parameter to “false”, you can apply the additional parameter “align” to the shortcode in order to control the placement of the icon element, which allows for the following settings:

Example:

inline=”false” align=”ts-align-floatleft”

This parameter defines a tooltip that you can apply to your icon element. The tooltip will be stored as basic “title” attribute and you target the tooltip with 3rd party tooltip plugins by using the class name “ts-font-icon-holder”. It is important NOT to use any question marks in the tooltip content since these will cause problems when creating the necessary code output or when reimporting the shortcode into the generator.

Example:

tooltipcontent=”This is a sample tooltip.”

The plugin includes a basic CSS3 tooltip extension that can be used to style your tooltip. If you want to use that extension, you need to use the additional parameter “tooltipcss” and set it to “true” (default = “false”).

Example:

tooltipcss=”true”

If set to “true” you can use additional parameters to define the position of the tooltip in relation to your icon element (tooltipposition) and the color of the tooltip (tooltipstyle).

tooltipposition

There are 4 different positions the tooltip can be used with; the position is defined by a class name that will be applied to the icon element. The default position is “Top” (“ts-simptip-position-top”), so you don’t need to use the parameter if you want to use the default.

Top = “ts-simptip-position-top”

Right = “ts-simptip-position-right”

Bottom = “ts-simptip-position-bottom”

Left = “ts-simptip-position-left”

Example:

tooltipposition=”ts-simptip-position-right”

tooltipstyle

The CSS3 tooltip provides you with options for ten different colors that you apply to the tooltip by using the parameter “tooltipstyle”. The default color is “Black”, so you don’t have to use this parameter when sticking with the default color. The other colors are as follows:

Gray = “ts-simptip-style-gray”
Green = “ts-simptip-style-green”
Blue = “ts-simptip-style-blue”
Red = “ts-simptip-style-red”
Orange = “ts-simptip-style-orange”
Yellow = “ts-simptip-style-yellow”
Purple = “ts-simptip-style-purple”
Pink = “ts-simptip-style-pink”
White = “ts-simptip-style-white”

Example:

tooltipstyle=”ts-simptip-style-blue”

This parameter applies a link to a file or page to the icon element. By default, this parameter is empty, so no link will be applied.

Example:

link=”http://www.codecanyon.net”

This parameter defines how a link that has been applied to the icon element should be opened. The default value is “_parent”, which will open the link in the same window. The other option is “_blank”, which will open the link in a new window or tab. This parameter will only be processed in the parameter “link” has been set as well.

Example:

target=”_blank”