Icon

In this article, we're going to discuss the Icon Element and its settings. The Icon Element can be used to add icons in pages created in either Cornerstone or Pro's Content Builder (can also be used in Footer and Header as well). So let's dive in!

  1. Setup
  2. Design Options
  3. Customize
  4. Summary

The Icon element adds an icon on the page. To add the Icon Element, simply search for "Icon" and drag "Icon" to the canvas.

Icon Element Addition

Setup

The Setup section contains controls for the initial setup of the icon.

Icon Element Setup
  • Font Size - Use this option to set the base font of the icon.
  • Icon - Use this option to select the icon. Clicking this option will open up the icon selection dialog.
  • Width - Use this options to set the width of the icon.
  • Height - Use this options to set the height of the icon.
  • Color & Background - Use this option to set the main icon color and background of the icon.
Icon Element Setup Icon

Design Options

Under the Design settings, you have options to set the margin, border, box-shadow, border-radius, text-shadow of the Icon.

Margin

Use this option to set the margin of the Icon. You can change the settings for all the sides of the Icon or modify them individually.

Icon Element Setup Margin

Border

Use this option to set the border of the Icon. You can set the style, width and color of the border on all sides or each side individually.

Icon Element Setup Border

Border Radius

Use this option to set a border-radius for the Icon. You can set the curve on all sides or set them individually.

Icon Element Setup Border Radius

Box Shadow

You can set a shadow over the Icon using the box-shadow control group.

  • X-Offset - Use this option to set the X offset of the shadow in the Icon.
  • Y-Offset - Use this option to set the Y offset of the shadow in the Icon.
  • Blur - Use this option to set the intensity of the blur effect in the Icon.
  • Spread & Position - Use this option to set the spread amount of the items section shadow and decide if you want the shadow to sit inside or outside of the Icon.
  • Color - Use this option to set the color of the Icon shadow.
Icon Element Setup Box Shadow

Text Shadow

The text-shadow control group contains settings to set a text-shadow for the Icon text.

  • X-Offset - Use this option to set the X offset of the text-shadow.
  • Y-Offset - Use this option to set the Y offset of the text-shadow.
  • Blur - Use this option to set the intensity of the blur effect in the text-shadow.
  • Color - Use this option to set the color of the text-shadow.
Icon Element Setup Text Shadow

Customize

The customize section consists of controls to customize the element if you are into HTML, CSS, and Javascript.

Icon Element Customize Tab
  • ID - Use this option to set an HTML ID for the element. The ID should be unique on the page.
  • Class - Use this option to set an HTML Class for the element. You can use the class for your custom CSS code.
  • Element CSS - Use this option to have better control over the element to access the inner tags of the element using $el as the CSS selection. Click here for more detailed information.
  • Hide During Breakpoint - Use this option to hide the element on different device sizes. Click here for more information.
  • Custom Attributes - Use this option to add a custom attributes to the wrapper HTML tag of the element. Such as data-info=123. You can use the option to inject custom information into the element to use on your customization code.
Custom Attributes

Summary

To sum up, we've discussed the Icon Element. We've discussed that an Icon Element is an easy tool for adding icons on a page and we've learned how to change it's content and design and delved into details of the Icon Element settings.

See something inaccurate? Let us know