Introduction

General Features

  • Includes 12 different Icon Fonts with 3,200+ Icon
  • Complex Shortcode + HTML Generator built in
  • Live Icon Preview in Generator
  • Easily re-edit / import existing Shortcode
  • Directly insert Shortcode from Generator into tinyMCE Editor
  • Icon Shortcodes will work in widgets
  • Multiple CSS3 animations for icons
  • Includes CSS3 Tooltips (4 positions / 10 colors) that can be applied to icon
  • Works alongside Visual Composer plugin
  • Easily disable the icon fonts you don’t want to use
  • Auto-Update Feature with License Key

Included Fonts

This plugin (currently) includes 12 different icon fonts (more coming with future updates), giving you access to over 3,200 different icons. You can disable the fonts you are not planning to use to save bandwidth and server load.

vc-font-preview
Click image to view a listing of all included fonts and a preview of their icons.
  • Font Awesome (368 Icons)
  • Brankic1979 Font (350 Icons)
  • Countricons (194 Icons)
  • Currencies (89 Icons)
  • Elegant Icons Font (360 Icons)
  • Entypo Font (284)
  • Foundation Font (283 Icons)
  • Genericons Font (122 Icons)
  • IcoMoon Font (451 Icons)
  • Monuments Font (255 Icons)
  • Social Media Font (149 Icons)
  • Typicons Font (308 Icons)

Installation

Plugin Installation

Please install the plugin like you would install any other plugin in WordPress. You can either upload the extracted plugin directory directly to you server using any FTP program, or use the WordPress Plugin Installation routine:

Please install the plugin like you would install any other plugin in WordPress. You can either upload the extracted plugin directory directly to you server using any FTP program, or use the WordPress Plugin Installation routine:

1. In your WordPress Admin panel, click on “Plugins” -> “Add New”

2. Click on “Upload”

3. Click on “Browse” and navigate to the folder on your harddrive where the plugin file (ZIP version) is located. Select the plugin file and click on “Open” in your popup window.

4. Click on “Install Now”

5. Wait until WordPress finishes the upload and installation process.

6. Click on “Activate Now”

If you have problems installing the plugin, follow the step by step instructions you can find here.

h

If you have followed all these steps correctly, the plugin should now be installed and functional. You will find a new menu item in your Admin Panel, called “Iconicum”.

CONGRATULATIONS, because you are done with the installation!

License Code

h

After installation and activation of the plugin, you will notice that the plugin is saying that it is running in “Demo Mode”. So, as a first step, you need to enter your license key in order to fully activate the plugin and to enable all Features. Without license key, the gallery remains in “Demo Mode” which is severely limited in its functionality.

In your WordPress Admin Panel, locate the new menu item “Iconicum” and click on “License Key”. Here you can enter the license key you received from Envato at the time of purchase. Click on the image to the left if you don’t know how to retrieve your license key. Once you entered and saved your license key, the page will connect to Envato/CodeCanyon to check the license and if successful, will disable the “Demo Mode” and unlock all features.

h

After you entered your license key, click on one of the “Save Settings” button and the plugin will check your license. If your license check was successful, the plugin will leave the “Demo Mode” and unlock all features. You will also see a summary of your license information as shown in the example below.

h

Usage

Shortcode Generator

The included shortcode generator is the core of this plugin and it will allow you to style pretty much every aspect of your icon element.

The Shortcode Generator will take you to the design process for your icon element on a step-by-step basis, while providing you with a live preview of the icon element you are currently designing.

A. Font

As a first step, you need to select the icon font you want to use. By default, the first activated icon font (see tab “Settings Panel”) will be pre-selected for you. Use the provided select box “Font” to switch between all active fonts or use the last item in that selectbox to use all active fonts.

B. Icon

Based on the font selection you made, the selectbox “Icon” will include a miniature preview of all the icons included in that font. Scroll through the list until you find the icon you want and click on it. On top of the list, you will also find a search field where you can filter the icons by keyword.

C. Size

After you selected the font and icon, you can define the size of the icon. The default size is 16px and the maximum size is 400px. You can either enter your desired size (in px) into the inputbox or use the slider to adjust the size.

D. Color

The next step will be to define the icon color. To do so, click on the button “Select Color” and a colorpicker should open up, where you can easily pick the color you want. If you already know the HEX value of your desired color, you can enter it into the input field that will show up as well.

E. Animations

It is possible apply a variety of CSS3 animations to your icon element; either as default animation (where the animation will always be active) or as hover animation (where the animation will only be active when hovering over the icon).

You must decide which kind of animation you want to apply to your icon and click on the corresponding button “Default” or “Hover”. Based on your selection, the selectbox below will be populated with your available options for an animation.

Scroll through that selectbox and click on the animation you want to assign to your icon element. If no animation should be assigned, use the top option “None”.

F. Viewport

Aside from the default or hover animation, you can also assign a so-called “Viewport Animation” which will be triggered once the icon element comes into browser view. This animation will only be triggered once. Use the selectbox to pick the viewport animation you desire.

G. Background

By default, the icon element does not have a background color. If you want to assign one, you need to switch the button “Background” from “Off” to “On” by simply clicking on it or sliding the button. Once enabled, a colorpicker for the background color will be available as well as a setting for the icon opacity.

H. Hover Colors

If you want your icon to change its color or background when hovering over it, you must enable that setting in the generator first by switching the corresponding toggle from “Off” to “On”. Once enabled, you will get access to two more colorpickers; one for icon hover color and one for the icon hover background color. Furthermore, you will also get another option to define the hover opacity of your icon element.

I. Border

You can apply a border to your icon element, but you must enable that option first by using the provided toggle. Once enabled you will see a selectbox to define the type of border you want, another selectbox to apply a predefined radius to your border corners, a colorpicker for the border color and a slider/input for the border width in px.

J. Padding

If you want to apply a padding to your icon element, use the provided slider / input to do so. The selected padding in px will be applied evenly to all sides of the icon element. A padding can be useful when applying a border to your icon element. Padding will be applied to the inside of the icon element, basically pushing out the icon border.

K. Margin

When using your icon element with other content around it, it might be useful to apply a margin to your icon in order to create some space between your icon element and other elements around it. The default margin is 5px for all sides of the icon but you can assign a different margin for each side once you enabled that option by using the provided toggle.

L. Link

If you want to apply a link to another page or file to your icon element, you must enable that option first via the corresponding toggle. Once enabled, you can enter the link to your page or file and define how that link should be opened (same page or new page / tab).

M. Icon Positioning

By default, an icon will be displayed in line with surrounding (text) elements without breaking the flow of element. But you can assign a different behavior by turning off the “Show Icon as Inline” option, which will provide you with a new selectbox where you can specify how your icon element should be positioned.

N. Tooltip

The generator allows you to assign a tooltip to your icon element. You can enter your tooltip text in the provided text area “Content” (but do NOT use quotation marks in your text).

By default, the tooltip will be applied as standard “title’ attribute but you can also use the included CSS3 tooltip option, which will provide you with a more styled / useful tooltip.

In order to use the CSS3 tooltip option, you must switch the toggle from “Title” to “CSS3”, which will then allow you to define the tooltip position and tooltip style (color).

O. Custom ID / Class

Sometimes it is beneficial to assign a custom ID or class name to your icon element. The ID can be used to target one specific icon element directly, while the class can be used to target a group of icons with the same class name.

This can be useful when applying additional JavaScript/Jquery functions to your icon element or if you want to assign some additional CSS settings.

Shortcode Syntax

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″

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”

Settings Panel

Placement of tinyMCE Button

The plugin will create a tinyMCE button for the shortcode generator that will be shown in your text editor (for pages and posts). There are two possible placements for that button:

A) Above the standard button bar (next to the “Add Media” button)
This button will be visible when in “Visual” and “Text” mode.

B) Inside the standard button bar
This button will only be visible when in “Visual” mode.

By default, the tinyMCE button for the Shortcode Generator will be shown next to the Media Button (Option A). In order to change that setting, uncheck the corresponding checkbox shown in the setting and save your changes.

Font Selections

The settings panel allows you to enable / disable the included fonts in order to save bandwidth and server load. That way, you are only loading the fonts that you are actually planning on using; all other font files will be ignored.

Active fonts are displayed with a blue shadow around their respective image and the checkbox below the image will be checked.

Inactive fonts are displayed with a red shadow around their respective image and the checkbox below the image will be unchecked.

In order to toggle between “active” / “checked” and “inactive” / “unchecked”, just click on the image itself or on the checkbox below the image.

Once you made your selections, click the “Save Settings” button.

Custom CSS Editor

In order to adjust the Icons to your WordPress Theme or to apply additional seetings not covered by the generator, please use the Custom CSS Editor that comes with the plugin and do not change any CSS files directly. Direct changes to the CSS file will be lost after each update but the Custom CSS entered in the editor will be stored in the WordPress Database and will remain after each update.

h

While entering your CSS code, you don’t have to wrap the code in <style>…</style>; the plugin will do that for you. If you do add the wrapper anyway, your CSS code will break. Also, while the editor will do some basic checking of code syntax and integrity, you are responsible for entering the CSS code correctly. The plugin will output your CSS code as follows (inserted at the end of the HEAD section):

<style> ... Your Custom CSS ... </style>

Custom JS Editor

If you want to apply some javascript/jQuery functionality to your icons, the plugin provides you with a Custom JS Editor to do so. Each icon allows you to assign a custom ID or class name so you can target an individual icon or a group of icons by either using its ID or their class names.

h

While entering your JS code, you don’t have to wrap the code in <script type=”text/javascript”>…</script>; the plugin will do that for you. If you do add the wrapper anyway, your JS code will break. Also, while the editor will do some basic checking of code syntax and integrity, you are responsible for entering the JS code correctly. The plugin will output the code as follows:

<script type="text/javascript"> 
    (function ($) { 
        ... Your Custom JS ... 
    })(jQuery); 
</script>

The plugin will automatically add the required wrapper to allow for jQuery commands, using the “$” character when you target / address elements, instead of “jQuery” (you can still use “jQuery”).

Top