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.

## 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. ##