# Ikon blokk

> SVG ikonok beszúrása oldalra, bejegyzésbe, sablonba: csere, igazítás, tükrözés, forgatás és stílusok.

Az **Ikon** blokkkal ikont szúrhatsz be oldalakba, bejegyzésekbe, sablonokba és sablonrészekbe. Az ikon vektorgrafikus, ezért minőségvesztés nélkül átméretezhető, és az ikonnak és a hátterének is adhatsz egyéni színt.

## A blokk hozzáadása

Kattints a **+** gombra, keresd meg az **Ikon** blokkot, és kattints rá. Egy üres sorba írt `/icon` és az Enter is beszúrja.

## Az eszköztár

![Az Ikon blokk kijelölve a szerkesztőben, az eszköztáron az igazítás, a tükrözés, a forgatás és a Csere gomb](./kepek/blokkok-ikon-szerkeszto.webp)

*Az Ikon blokk kijelölve a szerkesztőben, az eszköztáron az igazítás, a tükrözés, a forgatás és a Csere gomb* (https://minta-bolt.hu/wp-admin/post.php?post=31&action=edit)

A képen a csillag ikon van kijelölve; az eszköztáron balról jobbra a blokkgombok következnek. Ha egy gomb fölé viszed az egeret, a súgószöveg megmondja a funkcióját.

- **Átalakítás:** az ikont Oszlopok, Részletek vagy Csoport blokkká alakítja.
- **Húzás** (hat pont) és **Mozgatás fel / le:** a blokk áthelyezése.
- **Igazítás módosítása:** nincs, balra, középre vagy jobbra igazítás.
- **Vízszintes tükrözés**, **függőleges tükrözés** és **Forgatás:** az ikon irányának állítása. Ugyanezek az oldalsávban is elérhetők.
- **Csere:** másik ikont választhatsz a könyvtárból.
- **Beállítások** (három pont): kettőzés, törlés és más műveletek.

![Az Ikon könyvtár ablaka keresővel és az ikonok rácsával](./kepek/blokkok-ikon-csere.webp)

*Az Ikon könyvtár ablaka keresővel és az ikonok rácsával* (https://minta-bolt.hu/wp-admin/post.php?post=31&action=edit)

A **Csere** gomb az **Ikon könyvtár** ablakot nyitja meg. A keresőmezővel szűrhetsz, a rácsban pedig a kijelölt (jelenleg használt) ikon kék hátterű. Az ikon nevére kattintva választhatsz másikat.

## A beállítások

Az oldalsáv **Blokk** fülén két alfül van: **Beállítások** (fogaskerék) és **Stílusok** (félig kitöltött kör).

### Beállítások fül

- **Felirat:** rövid leírás az ikonról a képernyőolvasót használóknak. Díszítő ikonnál hagyd üresen.
- **Haladó:** HTML-horgony, további CSS-osztályok és további CSS.

### Stílusok fül

![Az Ikon blokk Stílusok füle: betűkészlet, háttér, méretek és keret](./kepek/blokkok-ikon-stilusok.webp)

*Az Ikon blokk Stílusok füle: betűkészlet, háttér, méretek és keret* (https://minta-bolt.hu/wp-admin/post.php?post=31&action=edit)

A képen a **Stílusok** fül látszik, a színek, a szélesség és a keret beállításaival.

| Panel | Mit állíthatsz |
|---|---|
| **Betűkészlet** | az ikon színe |
| **Háttér** | az ikon mögötti szín |
| **Méretek** | az ikon szélessége (px) |
| **Keret** | keretszín, vastagság és lekerekítés |

A színválaszték a használt témától függ.