Summary

  • Overview
  • Add Icon To Text
  • Icon-In-Text and Text-With-Icon Presets
  • Icon-In-Text Context Toolbar
    • Change Icon In Text
    • Icon-In-Text Color
    • Icon-In-Text Fill
    • Icon-In-Text Hyperlink
  • Icon-In-Text Properties
    • Change Icon Button
    • Icon Align
    • Icon Size
    • Icon Spacing
    • Icon Position
    • Icon Color
    • Icon Transparency
    • Icon Hyperlink
  • Icon-In-Text Size In Mobile Views

Overview

To get the Icon-In-Text, you can insert an Icon into the Text Element by combining two elements, enriching the Text, which helps visitors understand the concept of the content and interact.

icon-in-text.png

Add Icon To Text

You can add an Icon to the Text Element by placing a cursor in the text content and clicking on the Icon on the Conext Toolbar.

add-icon-to-text.gif

Icon-In-Text and Text-With-Icon Presets

You can quickly add a Text with Icon or Icon-In-Text using the Presets in the Text, Icon, Button, Header, and Text sections of the Add Panel in the Quick Access Pane.

The following picture shows the Text-With-Icon Presets in the Header section of the Add Panel.

icon-in-text-header.png

Icon-In-Text Context Toolbar

Use Context Toolbar for quick adjustments of Icon In Text.

icon-in-text-context-toolbar.png

Change Icon In Text

You can edit the Icon in Text by clicking on the Icon button on the Context Toolbar and choosing or uploading the Icon in the Change Icon dialog.

Icon-In-Text Color

You can modify the Icon-In-Text Color, applying the Basic, Additional, or adding Custom Color.

Icon-In-Text Fill

You can change the Fill around the Icon In Text, applying the Basic, Additional, or adding Custom Color.

Icon-In-Text Hyperlink

Add the Hyperlink to the Icon if needed. Open a dialog by clicking on the Chain Link icon and set a link to a Page, Block Anchor, File or PDF, Phone Number, Email, Modal Popup, or Post.

Icon-In-Text Properties

You can edit the properties for the selected Icon-In-Text in the Property Panel.

icon-in-text-properties.png

Change Icon Button

You can change the Icon-In-Text by clicking on the Button in the Property Panel.

Icon Align

You can use the Icon Align buttons to change the position automatically to change the Icon position.

icon-in-text-align.gif

Icon Size

You can drag the Icon Size slider to resize the Icon In Text.

icon-in-text-size.gif

Icon Spacing

You can change the Spacing between the Icon and Text in the Property Panel for the Icon In Text by dragging the slider.

icon-in-text-spacing.gif

Icon Position

You can also edit the In-Text Icon Positonb to fine-tune the Icon positioning against Text.

icon-in-text-position.png

Icon Color

You can change the Color of the Icon In Text to Theme, Additional or Custom Color. You can also choose the Original (No Color) Color option.

icon-in-text-color.png

Icon Transparency

Drag the Transparency slider in the Property Panel to make the Icon In Text less visible and more transparent.

icon-in-text-transparency.png

Icon Hyperlink

You can link the Icon in Text with the Hyperlink property in the Property Panel. In the open dialog, specify a Page, Block Anchor, File or PDF, Phone Number, Email, Modal Popup, or Post.

Icon-In-Text Size In Mobile Views

You change the size of the Icon In Text for each Responsive Mode.