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.
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.
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 Context Toolbar
Use Context Toolbar for quick adjustments of Icon In Text.
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.
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 Size
You can drag the Icon Size slider to resize the Icon In Text.
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 Position
You can also edit the In-Text Icon Positonb to fine-tune the Icon positioning against Text.
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 Transparency
Drag the Transparency slider in the Property Panel to make the Icon In Text less visible and more transparent.
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.
##