Back to contents

JetEngine: How to Display an Icon with Dynamic Field

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

JetEngine plugin gives all its users the possibility to create a website for all purposes. Dynamic widgets are common instruments that allow showcasing almost any content.

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.

1Step — 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

2Step — 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

3Step — 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

4Step — 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

5Step — 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

6Step — 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

7Step — Customization

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

Customization

8Step — 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.