# SVG-ikonok, ikonkönyvtár és soron belüli ikonok

> Saját SVG-ikon feltöltése, az ikonkönyvtár használata, a Font Awesome Pro beállítása és az ikonok soron belüli SVG-ként való megjelenítése.

Az ikonokat kezelő beállítással rendelkező widgeteknél (például Ikon, Ikondoboz, Gomb) az ikont az ikonkönyvtárból választhatod, vagy feltölthetsz saját SVG-ikont.

## Ikonkönyvtár

Az ikonkönyvtár több mint 1500 ingyenes Font Awesome 5 ikont tartalmaz, és felületet ad az ikonok kezeléséhez.

1. Kattints az **Icon Library** gombra bármelyik widgetben, amelyik ikonbeállítással rendelkezik.
2. Az olyan widgeteknél, mint a Harmonika vagy a Váltó, az ikonok sorban, helyben vannak: a plusz és a mínusz ikonnal választasz az ikonkönyvtárból, vagy feltöltesz SVG-t.
3. A widgethez illő ikonokat a könyvtár magától megjeleníti. Ha akarod, az egész könyvtárban böngészhetsz.
4. A jobb oldali panelen a keresőmezőbe írt kulcsszóval név szerint szűrhetsz.
5. A bal oldali panelen az ikoncsaládot választhatod: **All**, **Regular**, **Solid** vagy **Brands**.

A könyvtár gyorsabb oldalbetöltést ad: csak azoknak az ikoncsaládoknak a CSS-e és betűkészlete töltődik be, amelyeket tényleg használsz. Az Icon Library első használatakor megjelenhet egy Font Awesome 5-re váltásról szóló párbeszédablak, ez egyszeri áttérés.

### Font Awesome Pro

Ha van Font Awesome Pro licenced, nagyobb ikonkészlet is elérhető: **Regular Pro**, **Solid Pro**, **Brands Pro**, **Light Pro** és **Duotone Pro**.

1. Menj az **Elementor → Beállítások → Integrációk** oldalra.
2. Görgess a Font Awesome Pro mezőhöz, és add meg a Kit ID-t.
3. Kattints a **Módosítások mentése** gombra.
4. Szerkessz egy ikonos widgetet, és kattints az **Icon Library** gombra.
5. Válassz egy Pro családot (például **Duotone Pro**), jelöld ki az ikont, és kattints az **Insert** gombra.

Ha a Font Awesome Pro ikonok színe nem változtatható, jelentkezz be a Font Awesome Pro fiókodba, és a kit beállításai között SVG helyett **Web Font** technológiát válassz. Az SVG-megjelenítés olyan CSS-tulajdonságokat (például a `fill`-t) használ, amelyeket a WordPress CSS-szerkesztője nem támogat.

## Saját SVG-ikon feltöltése

Az SVG (Scalable Vector Graphics) XML-alapú vektorgrafikus formátum. Az SVG-ket veszteség és elmosódás nélkül nagyíthatod vagy kicsinyítheted, nagyon kis méretűek, így az oldalad könnyű marad.

1. Kattints az **Upload SVG** gombra bármelyik ikonbeállítással rendelkező widgetben. Megnyílik a WordPress médiatár.
2. Töltsd fel a használni kívánt SVG-t.

Az SVG-ket a lehető legjobb, ha stílusozás (inline style) nélkül exportálod, így az Elementor stílusbeállításai teljes mértékben működnek rajtuk. Az SVG-ben a kitöltés (fill) és a körvonal (stroke) színe legyen `#000000`, különben a színválasztó nem fog működni a szerkesztőben.

### Biztonsági figyelmeztetés

Ismeretlen forrásból származó SVG-fájl feltöltése biztonsági kockázat lehet. Csak megbízható forrásból tölts fel fájlt, és csak akkor kapcsold be a funkciót, ha megérted és elfogadod a kockázatokat. Az Elementor SVG-modulja feltöltéskor megtisztítja a fájlt, eltávolítja a lehetséges rosszindulatú kódot, és csak a kép vázát hagyja meg. Feltöltés után az SVG előnézete látható, és a médiatárban SVG-fájlokra szűrhetsz. Az SVG az oldalba soron belüli kódként kerül be.

### Az SVG-feltöltés egyszeri engedélyezése

Az első SVG-ikon feltöltésekor figyelmeztetés jelenik meg arról, hogy bármilyen fájl, így az SVG feltöltése is biztonsági kockázatot hordozhat. Ha elfogadod a kockázatot, kattints az **Enable** gombra. Ezután az Elementor beállítások oldalára jutsz.

Az engedélyt a beállításoknál közvetlenül is megadhatod:

1. Menj az **Elementor → Beállítások** oldalra, és válaszd a **Haladó** fület.
2. A **Szűrés nélküli fájlfeltöltés bekapcsolása** legördülő listából válaszd a **Bekapcsolás** értéket.
3. Görgess le, és kattints a **Módosítások mentése** gombra.

Ezután térj vissza a szerkesztendő oldalhoz.

### Ha az SVG-nek beégetett mérete van

Ha az SVG-fájlban szélesség vagy magasság van megadva, a méretet felülírhatod a widget **Haladó** fülén az egyéni CSS-ben:

```css
selector svg { width: 100% !important; height: 100% !important; }
```

Így az Elementor szabályozza az ikon méretét.

## Soron belüli betűkészlet-ikonok

Az SVG-ket a böngésző saját motorja jeleníti meg. A soron belüli (inline) SVG-ikonok nem növelik a szerverkéréseket, így nem rontják az oldal teljesítményét. A funkciót a **Funkciók** fülön a **Soron belüli betűkészlet-ikonok** sorban kapcsolod be vagy ki (lásd [Kísérletek és funkciók](https://hub.hellowp.io/hu/plugins/elementor/globalis-beallitasok-funkciok/)).

Különbségek az ikonbetűkészletekhez képest:

1. **Megjelenítés:** az SVG az oldal HTML-jében jelenik meg, nem CSS-pszeudoelemként, mint az ikonbetűkészleteknél.
2. **Automatikus akadálymentesség:** az SVG alapból támogatja.
3. **Haladó lehetőségek:** az SVG támogatja az átalakításokat, a maszkolást és a rétegezést, az ikonbetűkészletek nem.
4. **Élesség:** az ikonbetűkészleteknél a böngésző simítást alkalmazhat, ami kevésbé élessé teheti az ikont. Az SVG-t a böngésző képként kezeli, ezért nincs simítás.

A funkció a Font Awesome Pro ikonokat nem alakítja át. Ha Font Awesome Pro-t használsz, a Font Awesome oldalán a kit beállításainál (**Kit → Settings → Technology**) állítsd **SVG**-re.