To use this functionality please download and activate Mesopotamia Icons plugin first.
Mesopotamia has a shortcode that allows you to create any kind of icon using Font Awesome icons(hundreds of icons to choose from!), you can create any kind of icon using that shortcode, also, there are two icon themes to choose from, you can put the shortcode in a text widget or in anyplace you want.
Creating Icons:
You can use the following shortcode to create a facebook icon with a link to your page or account(the following icons images created using Mesopotamia light skin):
[mesopotamia_icon link="https://www.facebook.com/mostasharoon" icon="fa-facebook"]
This will create icon like this:
You can specify the icon theme in the shortcode to change the icon style, for example, this shortcode:
[mesopotamia_icon theme="awesome" link="https://www.facebook.com/mostasharoon" icon="fa-facebook"]
Will produce the this icon
You can remove the “link” shortcode attribute if you want to make it just icon like:
[mesopotamia_icon icon="fa-facebook"]
This will produce the same first icon but without the link.
To create a set of icons just use the shortcode more than once:
[mesopotamia_icon link="https://www.facebook.com/mostasharoon" icon="fa-facebook"] [mesopotamia_icon link="https://twitter.com/mostasharoon" icon="fa-twitter"] [mesopotamia_icon link="https://www.youtube.com/channel/UC4PWLQQVXIod_wUQ1NXjAVw" icon="fa-youtube"]
This will output the following set of icons:
If you use the theme attribute like the following:
[mesopotamia_icon theme="awesome" link="https://www.facebook.com/mostasharoon" icon="fa-facebook"] [mesopotamia_icon theme="awesome" link="https://twitter.com/mostasharoon" icon="fa-twitter"] [mesopotamia_icon theme="awesome" link="https://www.youtube.com/channel/UC4PWLQQVXIod_wUQ1NXjAVw" icon="fa-youtube"]
This will output the following set of icons:
Shortcode Options
Option
Example
Description
icon
icon="fa-facebook"
The only required attribute for the shortcode in order to render the icon.
This attribute will specify the icon that will be render, to get the require icon value navigate to Font Awesome website and click on the icon that you want then copy its class, in the facebook icon case see this image
size
size="45px"
The size of the icon, you can use any CSS unit here for example 1em.
theme
theme="awesome"
The icon theme, you can choose from awesome or mesopotamia.
link
link="https://mostasharoon.org"
The link of the icon.
icon_color
icon_color="#ffffff"
The color of the icon, you can use any color that supported by CSS color property, this feature might not work with all icon themes.
background_color
background_color="#333333"
The background color of the icon, you can use any color that supported by CSS background-color property, this feature might not work with all icon themes.
background_type
background_type="fa-circle"
This attribute will specify the background icon that will be rendered, to get the require icon value navigate to Font Awesome website and click on the icon that you want to make it as a background then copy its class, this feature might not work with all icon themes.