ClickOn Icons Wordpress Plugin

68 interactive and beautiful flat icons for your website.

Overview

This plugin will include powerful, responsive and very versatile icon groups to be displayed anywhere in your Wordpress website.

Features

Basic features

  • 68 different icons.
  • Custom title and description.
  • Add icon groups through widgets on the customizer or widget admin area.
  • Add icon groups through shortcodes in all contents.
  • Infinite colors.
  • Click to chat, call or open a profile page.

Icons

  • Each icon can have a custom URL, ID or Phone number depending on the icon functionality.
  • Each icon can have a custom title for SEO.
  • Each icon can be opened in the same or new tab/window independently.
  • WhatsApp icon opens a WhatsApp chat window if the app is available in mobile devices and computers. A valid mobile phone number is required and the user should have the WhatsApp app installed on the device.
  • Skype icon opens a Skype chat window if the app is available in mobile devices, tablets and computers. A valid ID is required and the user should have the Skype app installed on the device.
  • Phone icon opens the default calling app on mobile devices, tablets and computers. A valid mobile phone number is required and the user should be using a mobile phone or a computer with app that allows making phone calls.
  • All added icons can be sorted the way you want.

Appearance

  • 6 different icon sizes.
  • 5 different icon shapes.
  • 4 predefined color schemes + custom colors.
  • Align icons, title and description to the left, center, and right. Perfect for vertical and horizontal sidebars.
  • All icons are from FontAwesome version 4.7.
  • All icons are loaded from a json file.
  • 7 different title sizes.

Extras

  • Translation ready through a .pot file.
  • Already translated in english (default) and spanish.
  • The appearance of each icon group can be customized separately using a custom CSS class.

Try it!

Complete the fields below and click the icon next to them to test the plugin. Important: The information needed such as urls, email, usernames and phone numbers is not stored or sent across the internet by any means, so feel safe to try the icons.

Social profile page

Paste a Facebook profile URL including the 'http://'. This example shows how social profile pages are oppened by clicking on an social media icon. By default it opens it on a new browser tab.

E-Mail compose window

Paste an email addreess. This example shows how a compose email window is oppened by clicking on the envelope icon.

WhatsApp chat window

Paste a phone number (only numbers without spaces or special characters). We recomend that you try it with a friend's phone number that you know is using WhatsApp.

Skype chat window

Paste a username. We recomend that you try it with a friend's Skype username.

Place a phone call

Paste a phone number (only numbers without spaces or special characters). Always use the Country code + Phone number.

Installation

If you don't know how to install Wordpress plugins, follow the Wordpress plugin installation tutorial.

Creating icon groups

You can add icon groups to your website in two ways: By adding a widget to a sidebar or by pasting a shortcode in the content.

Adding widgets

Adding a widget is very simple and it can be done through:

  1. The Widgets Admin Panel.
  2. The Customizer.

Important: Widgets ara available only when the active theme has sidebars implemented. Sidebars could be available in all pages or some of them.

Adding a widget through the Widgets Admin Panel

  1. Login to your Wordpress admin area.
  2. Inside the Wordpress admin area, click the Appearance menu item.
  3. Click the Widgets submenu.
  4. Drag and drop the ClickOn Icons widget box into the desired sidebar.
  5. By now the widget has been added. After you personalize it, click the Save button located at the bottom of the widget.

Adding a widget in the Widgets Admin Panel
Example of adding a widget to a sidebar

Adding a widget through the customizer

  1. Login to your Wordpress admin area.
  2. Inside the Wordpress admin area, click the Appearance menu item.
  3. Click the Customize submenu. The Customizer will load.
  4. Click the Widgets menu item.
  5. Select the sidebar you want to add the widget to. If the sidebar is not visible or if it is deactivated or unclickable, navigate to the page the sidebar is available through the Customizer Preview.
  6. Click the Add a Widget button. A submenu will open.
  7. Click the ClickOn Icons widget.
  8. By now the widget has been added. After you personalize it, click the Save button located at the top of the Customizer page.

Add widget through the customizer
Example of how to add a widget through the customizer

Adding shortcodes

Generating a shortcode

Shortcode example
Shortcode example

To generate a shortcode follow the steps below:

  1. Login to your Wordpress admin area.
  2. Inside the Wordpress admin area, click the ClickOn Icons menu item. The ClickOn Icon Groups list will load.
  3. Once on the ClickOn Icon Groups list, click the Add New button. This will load the ClickOn Icon Group edit page.
  4. Once on the ClickOn Icon Group edit page, fill the Title with a name to identify it. This title will not be seen by the user and it only works for identification purposes. It is not part of the icon group
  5. Below the title is the ClickOn Icon Group metabox, there you can customize it the way you want.
  6. To generate a shortcode the icon group must be saved. To do that, click on the Publish button. The Publish button will now be called Update.
  7. Now the shortcode has been generated and it is displayed under the identification title.
  8. Copy the shortcode and follow the Place a shortcode steps.

Placing a shortcode

Placing a shortcode is very easy. With the copied shortcode generated before, go to the post or page you want to display the icon group and paste the shortcode somewhere in the content area.

Placing a shortcode inside content
Example of how to place a shortcode

Placing a shortcode inside your HTML:

To display a shortcode content inside your HTML you just need to use the do_shortcode Wordpress function in the desired PHP file, like the example below.

<?php echo do_shortcode('[mdclickon id="108"]'); ?>

Appearance

Title

The icon group title is located above the content. To hide the title simply remove the text from the text box.

Icon group title field
View of the icon group title.

Title sizes

You can set a custom title size from the Title Size dropdown located below the Title text box. All font types and text sizes are based on the active theme.

Icon group title size dropdown
View of the icon group title.

Important:

  1. Same as theme (This option is only available when using widgets and it is the default option for them because it uses the predefined sidebar title.)
  2. Heading 3 (Default option for shortcodes)

Description

The icon group description is located below the title and it is displayed always as a paragraph. To hide the description simply remove the text from the text box.

Icon group description field
View of the widget title configuration.

Content alignment

All content (title, description and icons) can be aligned to the left (default), center or to the right.

Content alignment dropdown
View of the content alignment configuration.

Icon sizes

All icon sizes are based on the website's base font-size specified in the website's stylesheet. There are six different icon sizes: Tiny, Small (default), Medium, Large, Extra large and Huge. This setting will be applied to all icons inside the group.

Icon sizes dropdown
View of the icon size configuration.

Icon sizes
Example of the icon sizes. From left to right: Huge, Extra large, Large, Medium, Small, Tiny.

Icon shapes

There are five icon shapes avilable to choose from: Circle (Default), Square with rounded corners and the Official logo shapes.

Icon shapes dropdown
View of the icon shape selection.

Circle - Filled icons

Circle - Outlined icons

Square - Filled icons

Square - Outlined icons

Official icons

Icon colors

Five different color options are available:

  • Theme (default): All icons use the same colors as the website link colors.
  • Official: Displays the icons with the official colors of each brand. The hover state is a darker version of the default brand color and if the default brand color is to dark, it will be a 10% lighter version of itself.
  • Theme / Official: Displays the official colors of each brand when the cursor is hovering the icon. The icon default color is inherited from the theme.
  • Custom / Official: Displays the official colors of each brand when the cursor is hovering the icon. The icon default color is customized by the user.
  • All custom: Colors for the default and hover states are set by the user.

Icon colors dropdown
View of the icon colors dropdown.

Color availability by icon shape

Shape: Circle - Filled

State\Colors Theme Official Theme / Official Custom / Official All Custom
Default background color Yes Yes Yes Yes Yes
Default Symbol color Yes Yes Yes Yes Yes
Hovered background color Yes Yes Yes Yes
Hovered symbol color Yes Yes Yes Yes

Shape: Circle - Outlined

State\Colors Theme Official Theme / Official Custom / Official All Custom
Default border color Yes Yes Yes Yes Yes
Default Symbol color Yes Yes Yes Yes Yes
Hovered border color Yes Yes Yes Yes
Hovered symbol color Yes Yes Yes Yes

Shape: Squared - Filled

State\Colors Theme Official Theme / Official Custom / Official All Custom
Default background color Yes Yes Yes Yes Yes
Default Symbol color Yes Yes Yes Yes Yes
Hovered background color Yes Yes Yes Yes
Hovered symbol color Yes Yes Yes Yes

Shape: Squared - Outlined

State\Colors Theme Official Theme / Official Custom / Official All Custom
Default border color Yes Yes Yes Yes Yes
Default Symbol color Yes Yes Yes Yes Yes
Hovered border color Yes Yes Yes Yes
Hovered symbol color Yes Yes Yes Yes

Shape: Official

State\Colors Theme Official Theme / Official Custom / Official All Custom
Default background color
Default Symbol color Yes Yes Yes Yes Yes
Hovered background color
Hovered symbol color Yes Yes Yes Yes

Official colors demo

Custom colors

When the custom option is selected, two new fields will be displayed depending on the icon shape. The first one is for setting the default icon color and the other is for when the icon is hovered.

Default custom colors
Default custom colors

Hovered custom colors
Hovered custom colors

Set a custom hex color or select one from the palettes.

Custom color selection
View of the color selector detail.

Icons

Icons and behaviors

Here is a list of the 68 different icons and their requirements and what they do:

# Icon Brand name FontAwesome CSS class Requires Opens in
1 500px fa-500px URL Opens in browser
2 Amazon fa-amazon URL Opens in browser
3 AngelList fa-angellist URL Opens in browser
4 Bandcamp fa-bandcamp URL Opens in browser
5 Behance fa-behance URL Opens in browser
6 Bitbucket fa-bitbucket URL Opens in browser
7 Black Tie fa-black-tie URL Opens in browser
8 CodePen fa-codepen URL Opens in browser
9 CodiePie fa-codiepie URL Opens in browser
10 Deviantart fa-deviantart URL Opens in browser
11 Dribbble fa-dribbble URL Opens in browser
12 Eercast fa-eercast URL Opens in browser
13 E-Mail fa-envelope ID Opens in E-Mail app
14 Etsy fa-etsy URL Opens in browser
15 Facebook fa-facebook URL Opens in browser
16 Flickr fa-flickr URL Opens in browser
17 Forumbee fa-forumbee URL Opens in browser
18 Foursquare fa-foursquare URL Opens in browser
19 GitHub fa-github URL Opens in browser
20 GitLab fa-gitlab URL Opens in browser
21 Google+ fa-google-plus URL Opens in browser
22 Gratipay fa-gratipay URL Opens in browser
23 Houzz fa-houzz URL Opens in browser
24 IMDb fa-imdb URL Opens in browser
25 Instagram fa-instagram URL Opens in browser
26 JSFiddle fa-jsfiddle URL Opens in browser
27 Last.fm fa-lastfm URL Opens in browser
28 Leanpub fa-leanpub URL Opens in browser
29 LinkedIn fa-linkedin URL Opens in browser
30 Medium fa-medium URL Opens in browser
31 Meetup fa-meetup URL Opens in browser
32 Mixcloud fa-mixcloud URL Opens in browser
33 Odnoklassniki fa-odnoklassniki URL Opens in browser
34 Phone fa-phone Phone number Opens in Phone app
35 Pinterest fa-pinterest-p URL Opens in browser
36 Product Hunt fa-product-hunt URL Opens in browser
37 Quora fa-quora URL Opens in browser
38 Ravelry fa-ravelry URL Opens in browser
39 Reddit fa-reddit-alien URL Opens in browser
40 RenRen fa-renren URL Opens in browser
41 Scribd fa-scribd URL Opens in browser
42 Skype fa-skype ID Opens in Skype app
43 Slideshare fa-slideshare URL Opens in browser
44 Snapchat fa-snapchat-ghost URL Opens in browser
45 SoundCloud fa-soundcloud URL Opens in browser
46 Spotify fa-spotify URL Opens in browser
47 StackExchange fa-stack-exchange URL Opens in browser
48 Stack Overflow fa-stack-overflow URL Opens in browser
49 Steam fa-steam URL Opens in browser
50 StumbleUpon fa-stumbleupon URL Opens in browser
51 Telegram fa-telegram URL Opens in browser
52 Tencent Weibo fa-tencent-weibo URL Opens in browser
53 Theme Isle fa-themeisle URL Opens in browser
54 Trello fa-trello URL Opens in browser
55 Trip Advisor fa-tripadvisor URL Opens in browser
56 Tumblr fa-tumblr URL Opens in browser
57 Twitch fa-twitch URL Opens in browser
58 Twitter fa-twitter URL Opens in browser
59 Viadeo fa-viadeo URL Opens in browser
60 Vimeo fa-vimeo URL Opens in browser
61 VK fa-vk URL Opens in browser
62 Weibo fa-weibo URL Opens in browser
63 WhatsApp fa-whatsapp Phone number Opens in WhatsApp app
64 Wordpress fa-wordpress URL Opens in browser
65 WP Explorer fa-wpexplorer URL Opens in browser
66 Xing fa-xing URL Opens in browser
67 Yelp fa-yelp URL Opens in browser
68 YouTube fa-youtube URL Opens in browser

Icon types

Icons are catalogued by the action they perform and there are three types:

  • Icons that when clicked redirect the user to a URL.
  • Icons that when clicked open a chat window from the specified application.
  • Icons that when clicked open the phone application.

All icons have the following properties:

  • Link Identifier (URL, ID or Phone number depending on the icon type)
  • Link title for SEO.
  • Target (Enabled depending on the icon type)

Adding and editing icons

To add a new icon select it from the "Select the icon to be added dropdown list". When an icon is added, it will disapear from the dropdown list.

Select icon
View of the icon selector.

Once the icon is added, an icon details block will appear. There, you can add the URL, Phone Number or ID deppending on the icon type, set the title for SEO and tell if it should open in the same or in a new window (default). If an icon has no info, it will be hidden from the user. In this example we have added a new WhatsApp icon.

Icon block
View of the icon detail.

Sorting icons

To change the order of the icons, simply press the icon title and drag it up or down.

Icon sorting
Example of icon sorting.

Removing icons

To remove an icon, just open the icon details and click "Remove icon". Once the icon is removed, it will be avilable again in the "Select the icon to be added" dropdown list.

Remove icon
Removing a icon.

Custom styles

You can personalize the aspect of all icons with your own css. First include a custom master class name and then follow the next example:

Icon colors dropdown
Example of a custom css master class name.

Example styling the title and description:

// Title
.my-custom-class .mdgtaco-widget-title{
   color: #000000;
   font-size: 36px;
}

// Description
.my-custom-class .mdgtaco-widget-description{
   color: #333333;
   font-size: 16px;
}

Example styling the whole icon group:

// Icon background color and symbol color
.my-custom-class .mdgtaco-icon .mdgtaco-default-icon-bg-color{
   color: #000000;
}
.my-custom-class .mdgtaco-icon .mdgtaco-default-icon-symbol-color{
   color: #FFFFFF;
}

// Hovered icon background color and symbol color
.my-custom-class .mdgtaco-icon:hover .mdgtaco-default-icon-bg-color{
   color: #999999;
}
.my-custom-class .mdgtaco-icon:hover .mdgtaco-default-icon-symbol-color{
   color: #FFFFFF;
}

Example styling a particular icon:

In the following example we are using the Facebook icon using the mdgtaco identifier plus the Facebook FontAwesome CSS class which is fa-facebook. So the class name will be mdgtaco-fa-facebook instead of the mdgtaco-icon.

// Icon background color and symbol color
.my-custom-class .mdgtaco-fa-facebook .mdgtaco-default-icon-bg-color{
   color: #000000;
}
.my-custom-class .mdgtaco-fa-facebook .mdgtaco-default-icon-symbol-color{
   color: #FFFFFF;
}

// Hovered icon background color and symbol color
.my-custom-class .mdgtaco-fa-facebook:hover .mdgtaco-default-icon-bg-color{
   color: #999999;
}
.my-custom-class .mdgtaco-fa-facebook:hover .mdgtaco-default-icon-symbol-color{
   color: #FFFFFF;
}

Translations

This plugin is translated by default in english (default) and spanish. To generate a new translation you can use a tool like Poedit and follow the instructions below:

  • Run the Poedit application.
  • Go to File -> New from POT/PO file.
  • Navigate to the folder wp-content/plugins/mdgta-clickon/languages/ and open the mdgta-clickon.pot file.
  • Select the language you want to translate the file.
  • Translate each frase or word by clicking and translating them like te example below.

Translate
Example of how to translate from english to french using Poedit.

  • After the translation save the file with the name structure mdgta-clickon- + languagecode_COUNTRYCODE like mdgta-clickon-fr_FR and two files will be generated: mdgta-clickon-fr_FR.po and mdgta-clickon-fr_FR.mo.
  • Once the files are generated, upload them to your server in the wp-content/plugins/mdgta-clickon/languages/ folder.
  • For more information about language and country codes click on the following links: ISO 639-1 Language Codes and ISO-3166 Country Codes