# Ikon megjelenítése a Dynamic Fielddel

> Ikonválasztó metamező felvétele, ikon választása bejegyzésenként, és megjelenítése listázási sablonban a Dynamic Field „Ikon beágyazása az Iconpickerből” kimenetszűrőjével.

Az ikonok részletesebbé és áttekinthetőbbé teszik a listázás elemeit. Az ikont egy **Ikonválasztó** (Iconpicker) típusú metamezőben tárolod, a listázási sablonban pedig a **Dynamic Field** elem rajzolja ki.

## Az ikonmező felvétele

1. Nyisd meg a **JetEngine** menüt, és válaszd ki, hová kerüljön az ikonmező. A példában ez a **Bejegyzéstípusok** egyik típusa („Szerzők”), de metaboxban is felveheted (**Metaboxok**).
2. A metamezők között kattints az **Új metamező** gombra.
3. Add meg a **Címke** és a **Név/ID** értékét, a **Mező típusa** legyen **Ikonválasztó**.
4. Mentsd a bejegyzéstípust (**Frissítés**), illetve a metaboxot.

## Ikon választása a bejegyzéseknél

Nyisd meg a bejegyzéstípus tételeit, és szerkeszd sorban mindegyiket: az ikonválasztó mezőben válassz ikont, majd frissítsd a bejegyzést.

## Megjelenítés a listázási sablonban

1. Nyisd meg a **JetEngine → Listázások/komponensek** oldalt, és szerkeszd a listázási sablont (Elementorban az **Edit with Elementor** hivatkozással).
2. Húzd a sablonra a **Dynamic Field** elemet.
3. A **Tartalom** részben a **FORRÁS** legyen „Meta Data”, a metamező pedig az előbb felvett ikonválasztó mező.
4. Kapcsold be a **Filter field output** kapcsolót, és a **Callback** listából válaszd az **Ikon beágyazása az Iconpickerből** elemet. Ez egy előre elkészített művelet, amely az ikon azonosítója helyett magát az ikont írja ki. A listában más célú műveletek is vannak.
5. A **Stílus** részben állíthatod az ikon színét, méretét és a térközt.
6. Kattints a **Közzététel** (vagy **Frissítés**) gombra.

A listázási sablont a **Listing Grid** elemmel jelenítheted meg az oldalon. Ugyanez az eljárás a blokkszerkesztőben és Bricksben is működik, ott a megfelelő **Dynamic Field** blokkot, illetve elemet használd.

Ha ismétlő mező almezőjében van az ikon, a [Dynamic Repeater](https://hub.hellowp.io/hu/plugins/jet-engine/dinamikus-tartalom-ismetlo-widget/) fejezetben találsz másik megoldást.