Icon

Overview

The Icon Widget is useful for displaying the Font Awesome icons in various styles on your page.

Screenshot

The following is a GIF video to show you how to use the icon widget and the various options available :


icon widget

Options

The following are the various options we have for the list widget :


Icon

  • Icon : Choose icon from the list of Font Awesome Icons
  • Background Space : Set the background space around the icon
  • Link : Enter the URL for the icon’s link. To open a link in new window(tab) just click on slide button
  • Open link in new window (tab) : Will open the link in a new tab or window
  • Alignment : Align your icon in left, right or center

Style & Hover Effects

There are two states for this - Normal and Hover :

Normal

  • Color : Set the color of Icon
  • Background Shape : There are three different type of shape for the widget i.e Circle, Square and Rounded. If the circle shape is selected there will be a space created around the icon in circular form
  • Size : Choose the size of your icon from the given size available i.e small, large, mini, extra large, double large or you can customize the size of your icon by just selecting the Custom from the options available in the drop down
  • Rotate : Rotate the icon background
  • Rotate Icon : Rotate the icon
  • Background Color : Set the color to the 

Hover

  • Delay : Set the delay time for the hover effects to apply
  • Color : Set the color of icon
  • Animation : Choose the different types of animation effect from the options available in the drop down
  • Rotate : Rotate the icon background
  • Rotate Icon : Rotate the icon
  • Background Color : Set the color to the
  • Background Space : If there is a background set, then the space between the background shape and the icon on hover.

Border

Normal

  • Border Type : Choose the border type from the options available in drop down

Hover

  • Border Type : Choose the border type from the options available in drop down
Was this helpful to you?