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

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:

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).

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.