This is a front-end demo of the “Iconicum – WordPress Icon Fonts” plugin. The demo version of the plugin is limited to one font (Social Media Font) but once you enter the license code you receive from CodeCanyon at the time of purchase, you will get access to all included fonts.

Unlimited Colors and Sizes

The Shortcode Generator provides you with multiple Color Pickers, allowing you to easily define the icon color, background color, border color, hover color and hover background color. That alone provides you with unlimited ways to style your icon. But that’s just the beginning …

ts-awesome-home
ts-awesome-home
ts-awesome-home
ts-awesome-home
ts-awesome-home
ts-awesome-home
ts-awesome-home

Hover Effects

There are over 60 different CSS3 animations that you can apply to your icon as hover animation. Furthermore, you can change the icon color, icon background and opacity when a user is hovering over your icon. And of course, you can apply a link to another page or file.

ts-awesome-android
ts-awesome-android
ts-awesome-android
ts-awesome-android

Alignment

Float Left

ts-icomoon-paragraph-left

Left

ts-awesome-align-left

Center

ts-awesome-align-center

Right

ts-awesome-align-right

Float Right

ts-icomoon-paragraph-right

You can align your icon in any way possible!

Viewport Animations

You can also assign a so-called viewport animation to your icon element, which will get triggered once a user scrolls to the icon for the first time (meaning it becomes into browser view).

ts-awesome-html5
ts-awesome-css3
ts-awesome-desktop
ts-awesome-eye

Border Types

There are 8 different border types available and you can adjust the border width along with the border color!

ts-awesome-ambulance
ts-awesome-ambulance
ts-awesome-ambulance
ts-awesome-ambulance
ts-awesome-ambulance
ts-awesome-ambulance
ts-awesome-ambulance
ts-awesome-ambulance

Border Radius

Small Radius

ts-awesome-bug

Medium Radius

ts-awesome-bug

Large Radius

ts-awesome-bug

Full Radius

ts-awesome-bug

Tooltips

You can also assign tooltips to your icon element. Either as simple “title” tooltip or by selecting the included CSS3 tooltip, which comes in 4 different positions and 10 different color choices. By targeting the class name “ts-font-icon-holder”, which holds the “title” information with the specified tooltip content (when not using the included CSS3 tooltip), you can also use other tooltip solutions.

Top Position

ts-awesome-toggle-up

Right Position

ts-awesome-toggle-right

Bottom Position

ts-awesome-toggle-down

Left Position

ts-awesome-toggle-left

Black Tooltip

ts-awesome-comment-o

Gray Tooltip

ts-awesome-comment-o

Green Tooltip

ts-awesome-comment-o

Blue Tooltip

ts-awesome-comment-o

RedTooltip

ts-awesome-comment-o

Orange Tooltip

ts-awesome-comment-o

Yellow Tooltip

ts-awesome-comment-o

Purple Tooltip

ts-awesome-comment-o

Pink Tooltip

ts-awesome-comment-o

White Tooltip

ts-awesome-comment-o