Copy discount code:

crocoturns6
croco b-day main image left part croco b-day main image center part croco b-day main image right part
Expires In
croco b-day left image
croco b-day right image

Help Center

How to Display an Icon with the Dynamic Field Widget

How to Display an Icon with the Dynamic Field Widget

This simple tutorial will show you how to apply icons to the listing items for customizing or adding some more details.

From this guide, you will learn how to add Icons to the items, pull them within a Listing template and display through the Listing Grid. An Icon can make the items more detailed and attractive.

Let’s look at the process step-by-step.

WordPress Settings

Go to the WordPress Dashboard > JetEngine, choose where exactly you want to add a meta field for Icon. In our case, it is Post Types > Authors.

edit post type

Add Meta Field

In the Meta Field block, press Add New and fill all required information in the corresponding fields, press Update.

icon picker label

Pick the Icon for Each Item

After all Meta Fields are set, go to the Custom Post Type where you want to apply icon picker, and edit each item by adding preferable icons.

icon meta field

Choose the Page

The next action is to open the page in the Elementor where you want to add the icon. Go to the JetEngine > Listing > Edit with Elementor.

listing items

Edit with Elementor

Drag and Drop Dynamic Field Widget, then in the Content Section choose the Source as Meta Data and Meta Field as Icon Picker.

edit dynamic field

Filter Field Output

Scroll down and toggle to yes the Filter Field Output. In the Callback, pick Embed Icon from Icon Picker. It is a special pre-made command for displaying an icon. In the same field, you can find the list of other commands for different purposes.

callback

Customization

You can customize the icon in the Style Section, change the color, size and gap.

customization

Publish/Update

It is important to press the Publish/Update button for your settings to be saved.

Well, that’s all, look at the result:

icon picker example

JetEngine plugin has no limits, and these are not all the features of it. So do not stop following our updates and tutorials to keep abreast of all new products.

Was this article helpful?
YesNo

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.