The Icon with Text Element is a great way to create a stylish design for your text and include an icon next to it.
Similar to how a headline element and icon element work, we have combined these two elements into one to make it easier to use these two elements together.
To add the Icon with Text element to your page, simply click the + icon, or open the element library by clicking the elements icon in the top left of the editor
Type “Icon” in the element search, and you will see all the icon elements. Choose the “Icon with Text” element.
Then drag the icon with text element into your page:
Once you have it on your page, you’ll see the left sidebar open. You can select a pre-defined style there, or close it to start editing the element.
You can also click the magic wand icon to re-open the design options again if you would like to choose one.
Icon With Text Inline Toolbar
Now lets take a look at the other element options in the inline toolbar.
The layout icon there will have options for the element layout. You can choose to have the icon to the left, right, above, or below the text. You can also use an image or the default font icons for the icon, and then select the spacing and size of the icon
The background properties icon allows you to choose the background settings for the element. You can choose a background color, image, and/or overlay color.
The borders icon will allow you set the borders and shadow properties.
The alignment icon can be used to align the element
The cross arrows icon will all you to reposition the element on the page. Just hold your mouse and drag it where you want it to go.
You can also clone the element
If you need to delete the element, you can also do that using the trash icon
The gear icon will open up additional element options such as spacing above/below, width, and alignment.
You can also open the advanced options sidebar and change additional position properties, responsive properties, setup animation/delay, or other advanced options (such as setting a custom CSS class).
To edit the text, you can just click on the text like any other text element in OptimizePress.
You’ll notice when you click on the text, a separate “Text” inline toolbar will open:
If you highlight the text, you will have additional options there as well for formatting the text.
You can change the settings for the highlighted text, and even add a link if you want to.
To choose an icon, just click on the icon like you see below and you’ll be able to choose from a wide range of icons there
Once you choose the icon you want, you can also change the color, alignment, link options, and hover properties, as well as other settings.
If you have any questions about this, or any other elements or features in OptimizePress, simply reach out to our support team and we’ll be happy to help.