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.
- General Features
- Included Fonts
- Plugin Installation
- License Code (Demo Mode)
- Shortcode Generator
- Shortcode Syntax
- Settings Panel
- Custom CSS Editor
- Custom JS Editor
- Sources and Credits
- 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
Click image to view a listing of all included fonts and a preview of their icons.[/dt_teaser]
- 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)
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.
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.
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.
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.
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.
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.
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.
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.
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”.
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.
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.
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.
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.
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.
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.
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.
While the preferred method of creating your icon element should be the Shortcode Generator, you might want to “build” the shortcode yourself. Click on the button below to learn about the individual shortcode parameters.
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.
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.
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.
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>
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”).
Credit is due, where credit is due. For the purpose of this plugin / script, I have used the following extensions as listed:
- jQuery (utilizing the version coming with WordPress)
- Font Awesome
- Brankic Font
- Countricons Font
- Currencies Font
- Elegant Icons Font
- Entypo Font
- Foundation Font
- Genericons Font
- IcoMoon Font
- Monuments Font
- Social Media Font
- Typicons Font
- jQuery noUiSlider 7.0
- jQuery Toggles
- jQuery Rainbow
- jQuery Freewall
- jQuery LightBoxMe
- jQuery qTip2 v2.0.1
- jQuery Messi