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.
Add Meta Field
In the Meta Field block, press Add New and fill all required information in the corresponding fields, press Update.
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.
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.
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.
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.
Customization
You can customize the icon in the Style Section, change the color, size and gap.
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:
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.