# Ikon widget

> Font Awesome vagy saját SVG ikon megjelenítése az oldalon: nézet, forma, link, színek, méret, forgatás és rámutatási animáció.

Az **Ikon** widget egyetlen ikont jelenít meg az oldalon, többféle stílusban. Az ikont a Font Awesome könyvtárból választhatod, vagy saját SVG-t tölthetsz fel.

A widget háromféle nézetben használható: **Alapértelmezett**, **Halmozott** (az ikon teli hátteren áll) és **Keretezett** (az ikon keretben áll).

## A widget hozzáadása

1. A szerkesztőben kattints a **+** gombra, hogy megjelenjen az összes widget.
2. Kattints az **Ikon** widgetre, vagy húzd a vászonra. Lásd: [Elemek hozzáadása az oldalhoz](https://hub.hellowp.io/hu/plugins/elementor/szerkeszto-elemek-hozzaadasa/).

![Az Ikon widget Tartalom füle: Ikon, Megtekintés, Forma és Link](./kepek/widgetek-ikon-tartalom.webp)

*Az Ikon widget Tartalom füle: Ikon, Megtekintés, Forma és Link* (https://minta-bolt.hu/wp-admin/post.php?post=72&action=elementor)

A képen az ikon előnézete, a **Megtekintés** és a **Forma** lista, valamint a **Link** mező látszik.

## Tartalom fül

| Beállítás | Mit csinál |
|---|---|
| **Ikon** | Az ikon a könyvtárból, vagy feltöltött SVG |
| **Megtekintés** | **Alapértelmezett**, **Halmozott** vagy **Keretezett** |
| **Forma** | Halmozott és keretezett nézetnél: **Kör** vagy **Négyzetes** |
| **Link** | Az ikon linkje. A fogaskerék ikonnal új ablakban nyithatod meg, vagy `rel="nofollow"` értéket adhatsz hozzá |

Az **Igazítás** (balra, középre, jobbra) a **Stílus** fülön található.

## Stílus fül

![Az Ikon widget Stílus füle: Igazítás, Normál és Rámutatás állapot, színek, méret, padding, forgatás, keret és sarkok lekerekítése](./kepek/widgetek-ikon-stilus.webp)

*Az Ikon widget Stílus füle: Igazítás, Normál és Rámutatás állapot, színek, méret, padding, forgatás, keret és sarkok lekerekítése* (https://minta-bolt.hu/wp-admin/post.php?post=72&action=elementor)

A képen az **Igazítás**, a **Normál** és **Rámutatás** fül, az **Elsődleges szín** és **Másodlagos szín**, a **Méret**, a **Padding**, a **Forgatás**, a **Keret szélessége** és a **Sarkok lekerekítése** látszik.

Alapértelmezett nézetben:

| Beállítás | Mit csinál |
|---|---|
| **Elsődleges szín** | Az ikon színe |
| **Méret** | Az ikon növelése vagy csökkentése |
| **Forgatás** | Az ikon elforgatása |
| **Rámutatás animációja** | Az ikonra mutatáskor lejátszódó effekt (rámutatás állapotban) |

Halmozott vagy keretezett nézetben ezek is megjelennek:

| Beállítás | Mit csinál |
|---|---|
| **Elsődleges szín** | A háttér (halmozott) vagy a keret (keretezett) színe |
| **Másodlagos szín** | Az ikon saját színe |
| **Padding** | Az ikon körüli hely, amellyel a háttér vagy a keret méretét szabályozod |
| **Méret** | Az ikon mérete. Az ikonok alapból négyzet alakúak, ezért a nem négyzetes ikon körül üres hely maradhat. Feltöltött SVG-nél ezt a **Méretre igazítás** (Fit to Size) kapcsolóval szüntetheted meg |
| **Forgatás** | Az ikon elforgatása 360 fokig |
| **Sarkok lekerekítése** | A háttér vagy a keret sarkainak lekerekítése |

A **Normál** és a **Rámutatás** állapotban külön színt, méretet és forgatást adhatsz meg; a rámutatási animációk például a **Növekedés**, a **Pulzálás** vagy a **Ferdítés**.

## Haladó fül

A **Haladó** fülön a widget helyét, térközeit és egyedi kódját állíthatod. Lásd: [Haladó fül](https://hub.hellowp.io/hu/plugins/elementor/stilus-halado-ful/).

## Az eredmény az oldalon

![Az oldalon a keretezett, négyzet alakú szív ikon](./kepek/widgetek-ikonok-es-kepek-elol.webp)

*Az oldalon a keretezett, négyzet alakú szív ikon* (https://minta-bolt.hu/widget-demo-4/)

A képen a lista alatt a keretezett, négyzetes ikon látszik.