Icon Box

Overview

The Icon Box Widget are simply awesome and they are fully integrated with the Font Awesome icon set. The most common usage is for sections that list features of products or services, we can customize the every element of this widget: the icon, the headline and the descriptions.

Options

Icon Box

  • Icon : Choose the icon you want to display
  • Alignment : Align the icon to left ,top and right
  • Vertical Alignment : Align the icons vertically to Top, Middle, Bottom
  • Horizontal Alignment : Align the icons horizontally to Left, Center, Right
  • URL : Set the URL to the icon displayed.
iconbox_icon

Icon Style

  • Frame : Set the view of the icon as DefaultStacked or Framed. Stacked is with background and frame is with a frame surrounding the icon
  • Spacing : Set the background space from outside the icon.
  • State : Select the state in which style has to be viewed viz. Normal or Hover.
  • Color : Select the Color of the icon.
  • Size : Set the Size of the icon.
  • Rotate : Rotate the icon from 0 to 360 deg.
iconbox_iconstyle

Icon Border

  • State : Select the state in which border has to be viewed viz. Normal or Hover.
  • Border Type : Select the type of the icon border. CLICK HERE to see th types of border.
  • Color : Set the Color of the icon border.
  • Width : Set the width of the icon border.
  • Border Radius : Set the border radius of the icon border.
iconbox_border

Heading

  • Heading : Enter the description heading of icon box
  • URL : Set the URL to the icon heading.
  • Heading Alignment : Select the alignment of the text heading to Left, Right or Center.
  • Spacing : Set the space between the icon and the description.
  • State : Select the state in which effects of heading has to be viewed viz. Normal or Hover.
  • Color : Choose the color of the heading.
  • Typography : Choose the typography for the heading text viz Font Family, Font Size, Font Variant etc.
iconbox_heading

Content

  • Content Alignment : Select the content alignment to Left, Center, Right, Justify.
  • Spacing : Set the space between the heading and the bottom.
  • Content : Type your text description in this content box. CLICK HERE to see more about content.
  • Typography : Choose the typography for the content text viz Font Family, Font Size, Font Variant etc.
iconbox_content

Button

  • Enable the toggle for button to be displayed in icon box.
  • Button Type : Choose the type of button you want to display. CLICK HERE to see more about button types.
  • Size : Set the Size of the button. CLICK HERE to see more about button size.
  • Stretch : Enable the toggle to set button width as 100% of your screen resolution.
  • URL : Set the URL to the button.
  • Label : Enter the text to be displayed on button
  • Typography : Choose the typography for the button text viz Font Family, Font Size, Font Variant etc.
  • Spacing : Set the space between the content description and the bottom.
iconbox_button

Button Border

  • State : Select the state in which effects of butto has to be viewed viz. Normal or Hover.
  • Border Type : Select the type of border you want to display. CLICK HERE to see more about border types.
  • Border Color : Choose the color of the button border.
  • Border Width : Set the border width in pixels.
  • Border Radius : Set the border radius of the button border.
iconbox_btnborder
Was this helpful to you?