Bricks Builder Icon

A Bricks Builder Icon elem egyetlen ikont tesz ki az oldalra: vagy egy betűalapú ikont valamelyik beépített könyvtárból (Themify, Font Awesome, Ionicons), vagy egy feltöltött SVG-t. Az előbbi tagként, az utóbbi közvetlenül beágyazottként kerül a HTML-be, és ez a különbség a színezéstől a teljesítményig sok mindenre kihat.

Szándékosan minimális elem: nincs benne felirat, nincs háttérdoboz, nincs wrapper. Ha az ikon mellé szöveg kell, vagy köré kör alakú háttér, azt a szülő elem adja — tipikusan egy Div, amit flex módba állítasz. Ez az elem a feature boxok ikonjaihoz, a listák pipáihoz, a közösségi ikonsorokhoz és a lábléc elérhetőségei mellé való.

A döntés egyszerű: ha az ikon egy gomb feliratához tartozik, ne tegyél mellé külön Icon elemet, mert a Button saját Icon mezője pozíciót, térközt és külön tipográfiát is ad neki. Ha viszont az ikon önállóan áll egy feature box tetején, egy felsorolás elején, egy elérhetőség mellett, akkor Icon elem. Fotóhoz, logóhoz és illusztrációhoz pedig Image, mert azok raszteres képek, nem ikonok, és teljesen más méretezési és betöltési logika tartozik hozzájuk.

E billentyű vagy a bal oldali „Add element” (+) gomb, rákeresel, hogy „Icon”, és a kívánt szülőbe húzod. Alapértelmezetten egy csillag ikonnal jön létre a Themify könyvtárból, amit az Icon mezőre kattintva cserélhetsz: a felugró választóban könyvtárak közt váltasz, keresel név szerint, vagy a saját SVG-det töltöd fel. Ha nincs kiválasztva ikon, a szerkesztőben egy „No icon selected” helyőrző látszik, ami a frontenden nem jelenik meg, de üres helyet hagy a layoutban, ezért érdemes kitakarítani.

Ikonsornál (közösségi ikonok, feature lista) az első ikont állítsd be teljesen, majd duplikáld (Ctrl+D / Cmd+D), és csak magát az ikont meg a linket cseréld ezáltal a méret és a szín garantáltan egyforma marad. A térközt ne margóval, hanem a szülő Container gap értékével add meg.

Ikon és könyvtár. Az Icon mezőben választod ki az ikont a beépített könyvtárakból, vagy töltesz fel saját SVG-t. A választás nem csak ízlés kérdése: a betűalapú ikon tagként kerül ki, és a hozzá tartozó ikonfont betöltését igényli, a feltöltött SVG viszont közvetlenül a HTML-be ágyazódik, tehát nincs külön kérés hozzá. Ha egy oldalon mindössze néhány ikon van, az SVG a takarékosabb; ha viszont végig ugyanabból a könyvtárból dolgozol, a font egyszeri betöltése után minden további ikon ingyen van.

Méret. A Size mező font-size értéket ad az elemre, mértékegységgel együtt. Betűalapú ikonnál ez közvetlenül a glyph mérete, beágyazott SVG-nél pedig a Bricks em-alapú méretezésén keresztül skálázódik vele az ikon. Ezért működik az is, ha em vagy rem értéket adsz meg: az ikon együtt nő a környező szöveggel.

Szín. A Color mező egyszerre két CSS tulajdonságot állít: a color-t a betűalapú ikonok miatt, és a fill-t a beágyazott SVG-k miatt. Ezért működik ugyanaz a mező mindkét ikontípusnál, kivéve, ha a feltöltött SVG-be bele van égetve a saját fill attribútuma, mert azt a CSS nem tudja felülírni.

Link. A Link mezővel az ikon kattinthatóvá válik. Ilyenkor a Bricks egy a elembe csomagolja az ikont (bricks-link-wrapper osztállyal), és ami külön figyelmet érdemel: a Style fülön megadott egyedi attribútumok ilyenkor nem az ikonra, hanem a linkre kerülnek. Ez pont jól van így, mert az aria-label a linknek kell, nem az ikonnak. A link csak a frontenden aktív, a szerkesztőben nem, hogy ne vigyen el a vászonról kattintáskor

Accordion ikon. Ha az Icon elem egy nestable Accordion címsorában ül, megjelenik néhány extra beállítás. Az „Is Accordion Icon” bekapcsolásával az ikon a nyitás-zárás állapotát jelzi: alapértelmezés szerint mindig látszik és 90 fokkal elfordul nyitáskor, a forgatás mértékét és a hozzá tartozó átmenetet pedig külön mezőben állíthatod. Ha nyitott és zárt állapotra külön ikont szeretnél, duplikáld az elemet, és az egyiknél a Show értéke legyen Collapsed, a másiknál Expanded.

Egyéb stílus. Az ikon köré a Style fülön hátteret, keretet, keretsugarat és paddinget is tehetsz. A kör alakú ikonháttér így készül: egyforma szélesség és magasság, 50 százalék keretsugár, flex megjelenítés és középre igazítás. Egy-két ilyen esetben ez elegáns, de ha az ikon köré összetettebb doboz kell, a Div a helyes wrapper, az Icon pedig annak a tartalma.

Az ikonoknál egyetlen kérdés dönt el mindent: hordoz-e az ikon önálló információt, vagy csak díszít. A díszítő ikon ami mellett ott áll ugyanaz szövegben is, például egy „Gyors szállítás” felirat előtti teherautó a képernyőolvasónak zaj. Ilyenkor a Style fül Custom Attributes mezőjében adj neki egy aria-hidden=”true” attribútumot, és a felolvasó átugorja.

A jelentést hordozó ikon ennek a fordítottja. Ha az ikon az egyetlen jelölése valaminek egy közösségi ikon felirat nélkül, egy telefonszámra mutató kagyló, egy letöltés nyíl, akkor kell neki hozzáférhető név. Linkelt ikonnál ezt a legegyszerűbb aria-label attribútummal megadni: mivel a Bricks az egyedi attribútumokat a link wrapperre teszi, az érték pontosan oda kerül, ahová való. Beszédes értéket írj bele, például „Facebook oldalunk”, ne azt, hogy „ikon”.

Két további dolog. A csak ikonból álló link tapintható felülete mobilon legyen legalább 44×44 pixel az ikon mérete önmagában ritkán elég ehhez, ezért adj paddinget a linkre vagy a szülő Div-re. A kontraszt pedig az ikonoknál is számít: a halvány szürke ikon világos háttéren ugyanúgy nem olvasható, mint a halvány szürke szöveg.

A leggyakoribb panasz, hogy a feltöltött SVG nem veszi fel a Color mezőben megadott színt. Ennek szinte mindig az az oka, hogy magában az SVG fájlban szerepel egy fill attribútum vagy egy beágyazott style blokk, amit a CSS nem ír felül. Nyisd meg az SVG-t szövegszerkesztőben, töröld belőle a fill értékeket, és a Bricks színbeállítása azonnal érvényesül.

Ha az ikon nem jelenik meg, csak egy üres négyzet vagy semmi, akkor az ikonfont nem töltődött be. Ez leggyakrabban akkor fordul elő, ha az ikont dinamikusan, egyedi kóddal vagy sablonban szúrtad be, tehát a Bricks nem látja használatban, és nem tölti be hozzá a stíluslapot. Ilyenkor a legegyszerűbb megoldás, ha SVG-t használsz helyette.

Ha az ikon és a mellette lévő szöveg nem áll egy sorban, az a wrapper display értékén múlik. Tedd a kettőt egy Div-be, a Div legyen flex, az Align Items center, a Gap pedig 8 és 12 pixel között ez a leggyakoribb ikon-szöveg beállítás az egész builderben.

Ha az ikon mérete nem változik a Size mezőtől, nézd meg, nem írja-e felül valami az elemen: egy beállított szélesség és magasság, vagy egy globális osztály. A Size font-size-ként hat, tehát egy fix pixelben megadott méret erősebb nála.

Ha a szerkesztőben látsz egy „No icon selected” helyőrzőt, ott egy üres Icon elem maradt az oldalon. A frontenden nem látszik, de üres helyet foglal a layoutban akkor ezt töröld.

Mielőtt élesbe teszed az oldalt, érdemes végigfutni ezeken: van-e aria-hidden a díszítő ikonokon és aria-label a jelentést hordozó, linkelt ikonokon, elég nagy-e a tapintható felület az ikonos linkeknél, egyforma-e a méret és a szín egy ikonsoron belül, megfelel-e a kontraszt, nem maradt-e üres Icon elem a struktúrában, és nincs-e külön Icon elem ott, ahol a Button saját ikon mezője is elég lenne. Ha ebben elakadsz, vagy inkább profira bíznád, kérhetsz ajánlatot is.

Vörös László WordPress fejlesztő és Bricks Builder szakértő. Több mint 20 éve webfejlesztőként, 18 éve WordPress fejlesztőként dolgozom. Specialitásom a Bricks Builder, SEO és a biztonságos weboldalak fejlesztése.