Modern webes ikonok használata CSS-sel: SVG vs. font ikonok

A modern webes felületek nélkülözhetetlen elemei az ikonok. Nem csupán esztétikai kiegészítők; a vizuális kommunikáció alapvető eszközei, amelyek segítenek a felhasználóknak gyorsan megérteni a funkciókat, navigálni az oldalon, és javítják az általános felhasználói élményt. A megfelelő ikonválasztás és implementáció tehát kulcsfontosságú. Az elmúlt években két fő technológia vívja az elsőségért a küzdelmet a webes ikonok világában: az SVG (Scalable Vector Graphics) és a font ikonok (ikon betűtípusok). De melyik a jobb? Melyiket érdemes használni, és milyen szempontok alapján döntsünk? Ez a cikk részletesen bemutatja mindkét technológiát, előnyeiket és hátrányaikat, hogy segítsen megalapozott döntést hozni a következő projektjéhez.

Miért olyan fontosak az ikonok a weben?

Mielőtt belemerülnénk a technológiai részletekbe, érdemes megérteni az ikonok alapvető szerepét. Képzeljünk el egy navigációs menüt szöveges címkék nélkül, csak ikonokkal. Egy jól megtervezett ház ikon egyértelműen a „Főoldalra” utal, egy fogaskerék az „Beállításokra”, egy nagyító a „Keresésre”. Az ikonok univerzális nyelvet beszélnek, lerövidítik a szöveges magyarázatokat, és segítik a vizuális memorizálást. Hozzájárulnak a tiszta, minimalista designhoz, és különösen hasznosak a reszponzív webdesignban, ahol a korlátozott képernyőméret miatt minden pixelt okosan kell kihasználni. Emellett felgyorsítják az információfeldolgozást, növelik az oldal esztétikai értékét, és erősítik a márka vizuális identitását.

Font Ikonok: A Betűtípusok ereje

Mi is az a font ikon?

A font ikonok, vagy más néven ikon betűtípusok, olyan speciális betűtípusok, amelyek nem betűket és számokat tartalmaznak, hanem grafikai szimbólumokat. Gondoljunk csak a népszerű Font Awesome, Google Material Icons vagy Ionicons könyvtárakra. Ezeket úgy ágyazzuk be a weboldalunkba, mint bármely más betűtípust, majd CSS osztályokkal hivatkozunk az egyes ikonokra. A böngésző a megadott unicode karaktert az ikonnal helyettesíti, hasonlóan ahhoz, ahogy egy „A” betűt egy adott betűtípussal jelenít meg.

Hogyan működnek?

A font ikonok használata rendkívül egyszerű. A webfejlesztő egyszerűen beilleszti a betűtípus CSS fájlját a HTML dokumentumba, majd egy `` vagy `` elemre alkalmaz egy speciális CSS osztályt. Például: `` a Font Awesome esetében. A CSS fájl tartalmazza az `@font-face` szabályokat, amelyek betöltik a betűtípust, és a specifikus osztályokat, amelyek a megfelelő unicode karakterhez rendelik az ikont. A CSS segítségével aztán könnyedén módosíthatjuk az ikon méretét, színét, árnyékát, sőt, akár átmeneteket és animációkat is alkalmazhatunk rájuk, mintha csak szövegről lenne szó.

A Font Ikonok előnyei

Egyszerű használat és implementáció: Valóban ez az egyik legnagyobb vonzereje. Egyetlen CSS fájl behúzásával és néhány HTML osztály hozzáadásával máris használhatjuk az ikonokat. Nincs szükség bonyolult szerkesztőkre vagy képfeldolgozásra.

Skálázhatóság: Mivel vektorgrafikán alapulnak (lényegében betűk), a font ikonok bármilyen méretre torzítás és pixelizáció nélkül skálázhatók. Akár 10px, akár 1000px, mindig élesek és tiszták maradnak, tökéletesen illeszkedve a reszponzív design elvárásaihoz.

Könnyű testreszabhatóság CSS-sel: A betűtípusokhoz hasonlóan, a font ikonok stílusozása is gyerekjáték. `font-size`, `color`, `text-shadow` – ezekkel a tulajdonságokkal pillanatok alatt alkalmazkodhatunk a designhoz. Sőt, CSS transzformációkkal forgathatók, dönthetők, és alapvető animációk is hozzáadhatók.

Teljesítmény: Egyetlen HTTP kérés szükséges a betűtípus fájl letöltéséhez, ami több ikont is tartalmazhat. Ez sok esetben hatékonyabb lehet, mint több különálló képfájl letöltése. A modern böngészők optimalizálják a betűtípusok betöltését, ami tovább javítja a weboldal teljesítményét.

Böngészőkompatibilitás: A font ikonok technológiája régóta bevált, és szinte az összes modern böngésző támogatja, beleértve a régebbi verziókat is.

A Font Ikonok hátrányai

Egyszínűség: A font ikonok alapvetően egyszínűek. Ha több színre van szükségünk egy ikonon belül (pl. egy logóban), akkor több ikonréteget kell használni, ami bonyolulttá teheti a CSS-t és nehezítheti a karbantartást.

Renderelési anomáliák: Mivel a böngészők betűtípusokként kezelik őket, a renderelésüket befolyásolhatja az operációs rendszer és a böngésző betűtípus-kezelése (pl. anti-aliasing, subpixel rendering). Ez apró, de észrevehető különbségeket eredményezhet az ikonok megjelenésében különböző eszközökön és böngészőkön. Az ikonok néha „homályosnak” tűnhetnek kisebb méretekben.

Szemantikai hiányosságok és akadálymentesítés: Az `` vagy `` tag önmagában nem hordoz szemantikai jelentést. A képernyőolvasók számára ez problémát jelenthet. Megoldásként az `aria-hidden=”true”` attribútum használható, hogy az ikonokat figyelmen kívül hagyják, és helyette egy láthatatlan, de szemantikailag releváns szöveges címkét kell biztosítani a `sr-only` vagy `visually-hidden` osztályokkal.

Felesleges méret: Ha csak néhány ikont használunk egy nagy ikonkönyvtárból, akkor is be kell töltenünk a teljes betűtípus fájlt, ami szükségtelenül növelheti az oldal méretét. Bár léteznek eszközök a font subsettingre (csak a használt ikonok kiszedésére), ez további lépéseket igényel a fejlesztési folyamatban.

Korlátozott animációs lehetőségek: Bár alapvető CSS animációk lehetségesek, az összetett, részletes mozgások vagy állapotváltozások nehezebben valósíthatók meg, mint az SVG esetében.

SVG Ikonok: A Vektorgrafika jövője

Mi is az az SVG?

Az SVG (Scalable Vector Graphics) egy XML-alapú vektorgrafikus formátum. Ez azt jelenti, hogy az ábrákat matematikai képletek írják le, nem pedig pixelek, mint a hagyományos raszterképek (JPEG, PNG) esetében. Ennek köszönhetően az SVG-képek minősége romlás nélkül skálázhatók bármilyen méretre, legyen szó ikonról, logóról vagy komplex illusztrációról.

Hogyan működnek?

Az SVG ikonok implementálásának több módja is van:

Inline SVG: A leggyakoribb módszer, amikor az SVG kódot közvetlenül a HTML dokumentumba ágyazzuk. Ez maximális kontrollt biztosít a CSS és JavaScript segítségével. Például:
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-home"> <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path> <polyline points="9 22 9 12 15 12 15 22"></polyline> </svg>

SVG mint kép: Hivatkozhatunk SVG fájlra az `` tag segítségével, mint bármely más képfájlra: ``. Ebben az esetben azonban a CSS-sel való stílusozási lehetőségek korlátozottabbak.

SVG mint háttérkép: Használhatjuk CSS `background-image` tulajdonsággal is: `background-image: url(‘ikon.svg’);`. Ez gyakori a kisebb, dekoratív ikonoknál.

SVG Sprites: Egyetlen SVG fájlba gyűjtjük az összes ikont, majd a „ elem segítségével hivatkozunk a kívánt ikonra. Ez egy nagyon hatékony módszer a teljesítmény optimalizálására, mivel csak egy HTTP kérés szükséges az összes ikon betöltéséhez.

Az SVG Ikonok előnyei

Verhetetlen skálázhatóság és minőség: Mivel vektoralapúak, az SVG ikonok bármilyen méretben tökéletesen élesek és tiszták maradnak, felbontástól függetlenül. Nincs pixelizáció, nincs homályosság. Ez kritikus a modern, retina kijelzős eszközökön.

Többszínűség és komplexitás: Az SVG ikonok korlátlan számú színt, színátmenetet, árnyékot és mintázatot tartalmazhatnak. Ez lehetővé teszi a sokkal részletesebb, összetettebb, vizuálisan gazdagabb ikonok használatát, amelyek jobban illeszkedhetnek a márka vizuális identitásához.

Rugalmas stílusozás és animáció CSS-sel és JavaScript-tel: Az inline SVG elemek a DOM részei, így minden részüket manipulálhatjuk CSS-sel (fill, stroke, transform) vagy JavaScripttel. Ez fantasztikus lehetőségeket biztosít interaktív ikonok, összetett animációk és állapotváltozások létrehozására, amelyek jelentősen javítják a felhasználói élményt.

Kiváló akadálymentesítés: Az SVG-k tartalmazhatnak szemantikailag releváns címkéket, mint például a `` és „ elemek, amelyek a képernyőolvasók számára értelmes kontextust biztosítanak. Az `aria-labelledby` attribútummal ezekhez a leírásokhoz lehet hivatkozni, így az ikonok funkciója egyértelművé válik a látássérült felhasználók számára is.</li> <li><strong>Nincs renderelési anomália:</strong> Az SVG-ket a böngészők nem betűtípusokként, hanem grafikusként kezelik, így nincsenek olyan renderelési problémák, mint a font ikonoknál. A megjelenés konzisztens lesz minden eszközön és böngészőben.</li> </ul> <h3>Az SVG Ikonok hátrányai</h3> <ul> <li><strong>Összetettebb implementáció:</strong> Az inline SVG kód sok sornyi HTML-t jelenthet, ami „felpuffaszthatja” a dokumentumot és nehezebbé teheti az áttekinthetőséget. Az SVG sprite-ok használata pedig némi kezdeti beállítást és tooling-ot igényel (pl. Grunt, Gulp, Webpack pluginok).</li> <li><strong>Gyorstárazás:</strong> Az inline SVG a HTML részét képezi, így nem tárolódik külön a böngésző gyorsítótárában. Ha az SVG sokat változik vagy gyakran frissül, ez nem feltétlenül jelent problémát, de nagy mennyiségű, statikus SVG esetén jobb lehet külső fájlként hivatkozni rá (pl. sprite-ok vagy `<img decoding="async" src="...">` formájában).</li> <li><strong>Régebbi böngészők támogatása:</strong> Bár az SVG széles körben támogatott, nagyon régi böngészőverziók (pl. Internet Explorer 8 és korábbiak) nem kezelik. Ez azonban ma már ritkán jelent problémát a modern webfejlesztésben.</li> <li><strong>HTTP kérések (sprit nélkül):</strong> Ha minden ikont külön SVG fájlként hivatkozunk meg (pl. `<img decoding="async" src="ikon.svg">`), az rengeteg HTTP kérést generálhat, ami ronthatja az oldal teljesítményét. Ezt az SVG sprite-ok vagy az inline SVG használata orvosolja.</li> </ul> <h2>Összehasonlítás: Döntési szempontok</h2> <p>Most, hogy alaposan megismertük mindkét technológiát, nézzük meg, hogyan teljesítenek egymáshoz képest különböző kulcsfontosságú területeken:</p> <h3>Flexibilitás és testreszabhatóság</h3> <ul> <li><strong>Font ikonok:</strong> Korlátozottabb. Elsődlegesen egyszínűek, bár CSS trükkökkel lehet próbálkozni. Alapvető animációk és effektusok lehetségesek.</li> <li><strong>SVG ikonok:</strong> Magasan rugalmasabb. Többszínű, gradiens, mintázatok, minden rész külön stílusozható. Bonyolult, interaktív animációk könnyedén megvalósíthatók CSS-sel és JavaScripttel.</li> </ul> <h3>Teljesítmény</h3> <ul> <li><strong>Font ikonok:</strong> Egyetlen HTTP kérés a font fájlra, ami sok ikont tartalmaz. Kis méretű fájlok lehetnek, különösen subsetting esetén.</li> <li><strong>SVG ikonok:</strong> Inline SVG növelheti a HTML méretét. Külső SVG fájlok több HTTP kérést jelenthetnek (sprit nélkül). <strong>SVG sprite-ok</strong> használatával viszont kiváló a teljesítmény, mivel egyetlen kérésre az összes ikon betöltődik, és hatékonyan gyorsítótárazható.</li> </ul> <h3>Akadálymentesítés</h3> <ul> <li><strong>Font ikonok:</strong> `aria-hidden` és `sr-only` szöveg szükséges, ami extra lépéseket igényel.</li> <li><strong>SVG ikonok:</strong> Nativan támogatja a `<title>` és „ elemeket, amelyek szemantikailag releváns információt szolgáltatnak a képernyőolvasóknak. Természetesebben akadálymentesíthető.</li> </ul> <h3>Könnyű használat és fejlesztés</h3> <ul> <li><strong>Font ikonok:</strong> Nagyon alacsony belépési küszöb, gyors implementáció CSS osztályokkal.</li> <li><strong>SVG ikonok:</strong> Inline SVG viszonylag egyszerű, de sprite-ok esetén tooling és egy kis tanulás szükséges. A design és a kód közötti szorosabb kapcsolat mélyebb megértést igényel.</li> </ul> <h3>Vizuális minőség és renderelés</h3> <ul> <li><strong>Font ikonok:</strong> Változó lehet a böngészők és operációs rendszerek között a betűtípus renderelés miatt. Kisebb méreteknél homályosabbá válhat.</li> <li><strong>SVG ikonok:</strong> Pixel-perfect renderelés minden méretben, konzisztens megjelenés minden platformon.</li> </ul> <h3>Fájlméret</h3> <ul> <li><strong>Font ikonok:</strong> Egy betűtípus fájl, de ha csak kevés ikont használunk, akkor is betöltődik az egész (subsetting nélkül).</li> <li><strong>SVG ikonok:</strong> Az egyes SVG fájlok mérete az ikon komplexitásától függ. Minifikálással és Gzip tömörítéssel nagyon kicsi lehet. Az SVG sprite egyetlen fájl, ami hatékonyan tartalmazza az összes ikont.</li> </ul> <h2>Mikor melyiket válasszuk?</h2> <p>Nincs egyértelmű „győztes”. A választás mindig a projekt specifikus igényeitől, a design bonyolultságától, a teljesítménycéloktól és a fejlesztői csapat tapasztalatától függ.</p> <h3>Font ikonokat válassz, ha:</h3> <ul> <li><strong>Egyszerű, egyszínű ikonokra van szükséged:</strong> Ha a designod minimalista, és az ikonoknak csak egy színt kell felvenniük, a font ikonok nagyszerű választást jelentenek.</li> <li><strong>Nagy ikonkönyvtárat használsz:</strong> Ha sok ikont kell bevetni egy bevált, konzisztens könyvtárból (pl. Font Awesome), a font ikonok egyszerűbbek lehetnek a kezelhetőség szempontjából.</li> <li><strong>Gyors, könnyű implementációra törekszel:</strong> Egy prototípus vagy egy kisebb projekt esetén, ahol a sebesség a lényeg, a font ikonok verhetetlenek.</li> <li><strong>A böngészőkompatibilitás kritikus, még a nagyon régi verziók esetén is:</strong> Bár ez egyre ritkább, ha nagyon régi böngészőket is támogatni kell, a font ikonok megbízhatóbbak lehetnek.</li> </ul> <h3>SVG ikonokat válassz, ha:</h3> <ul> <li><strong>Többszínű, bonyolultabb, egyedi ikonokat szeretnél:</strong> Ha a design megkívánja a komplexitást, a színátmeneteket, vagy a márkádhoz illő, részletes ikonokat, az SVG az egyetlen járható út.</li> <li><strong>Részletes animációkra, interaktivitásra van szükséged:</strong> Ha az ikonoknak reagálniuk kell a felhasználó interakcióira, vagy összetett animációkat kell futtatniuk, az SVG biztosítja a legnagyobb rugalmasságot.</li> <li><strong>Maximális vizuális minőségre és renderelési konzisztenciára vágysz:</strong> SVG-vel biztos lehetsz benne, hogy az ikonjaid minden eszközön és kijelzőn élesek és egységesek lesznek.</li> <li><strong>Kiemelten fontos az akadálymentesítés és a szemantika:</strong> Az SVG natív támogatása a leíró elemeknek jelentős előnyt jelent ezen a téren.</li> <li><strong>Saját, márkához igazodó ikonokat használsz:</strong> Ha a design team egyedi ikonkészletet tervezett, az SVG az ideális formátum ezek implementálására.</li> </ul> <h3>Hibrid megközelítés</h3> <p>Egyre népszerűbbé válik a hibrid megközelítés, ahol mindkét technológiát használják a legjobb tulajdonságaik kihasználására. Például, a leggyakoribb, egyszínű UI ikonokhoz használhatunk font ikonokat a gyorsaság és egyszerűség miatt, míg a brand-specifikus, komplexebb vagy animált ikonokhoz az SVG-t vetjük be. Ez a rugalmas stratégia lehetővé teszi, hogy optimalizáljuk az oldal <strong>teljesítményét</strong> és a <strong>felhasználói élményt</strong> anélkül, hogy kompromisszumokat kötnénk a design minőségével kapcsolatban.</p> <h2>Bevált gyakorlatok a modern ikonhasználathoz</h2> <p>Függetlenül attól, hogy melyik technológiát választja, van néhány általános bevált gyakorlat, amelyet érdemes betartani:</p> <ul> <li><strong>Akadálymentesítés:</strong> Mindig gondoskodjon arról, hogy az ikonok funkciója érthető legyen a képernyőolvasók számára. Használja az `aria-hidden=”true”` attribútumot az ikonokon, ha azok csak dekoratívak, vagy ha van mellettük szöveges magyarázat. Ha az ikon funkcionális és nincs mellette szöveg, használjon `sr-only` szöveget (font ikonoknál) vagy `<title>` és „ elemeket (SVG-nél).</li> <li><strong>Teljesítmény optimalizálás:</strong> Minifikálja az SVG fájlokat (pl. SVGO-val), vagy használjon font subsettinget a font ikonoknál. Alkalmazzon Gzip tömörítést a szerveren. Használjon SVG sprite-okat, hogy minimalizálja az HTTP kérések számát. Gondoskodjon a megfelelő gyorstárazásról.</li> <li><strong>Karbantarthatóság:</strong> Tartsa rendszerezve az ikonjait. Használjon következetes elnevezési konvenciókat. Ha egy ikonkönyvtárat használ, tartsa naprakészen. Ha SVG sprite-okat generál, automatizálja a folyamatot build eszközökkel (pl. Webpack, Gulp).</li> <li><strong>Semantika:</strong> Ne használjon ikont ott, ahol szöveges címke lenne a helye. Az ikonok a szöveget kiegészítik, vagy helyettesítik, ha a kontextus egyértelmű.</li> <li><strong>Reszponzivitás:</strong> Győződjön meg róla, hogy az ikonok jól néznek ki és funkcionálnak minden eszközön és képernyőméreten. Az SVG és a font ikonok is alapvetően reszponzívak, de a CSS-sel való méretezésükre oda kell figyelni.</li> </ul> <h2>Konklúzió</h2> <p>A modern webfejlesztésben az <strong>SVG</strong> és a <strong>font ikonok</strong> egyaránt életképes megoldások az ikonok megjelenítésére. Nincs egyetemes „legjobb” választás; a döntés mindig a projekt egyedi körülményein múlik. Ha egyszínű, egyszerű, gyorsan implementálható ikonokra van szüksége, a font ikonok kiválóan megteszik. Ha azonban a komplexitás, a többszínűség, a részletes animációk, a maximális vizuális minőség és az akadálymentesítés a legfőbb szempont, akkor az SVG a jobb választás. Sok projekt esetében a hibrid megközelítés kínálja a legnagyobb rugalmasságot és hatékonyságot, ötvözve mindkét technológia előnyeit.</p> <p>A legfontosabb, hogy tudatosan válasszunk. Mérlegeljük a design igényeket, a teljesítményre vonatkozó elvárásokat és a fejlesztési költségeket. Egy jól megválasztott ikontechnológia nem csak szebbé, de funkcionálisabbá és felhasználóbarátabbá is teszi weboldalunkat.</p> </div> <div class="entry-meta mb-0"> <hr> <span class="tag-links"> <a href="https://iranyonline.hu/cimke/akadalymentesites/" rel="tag">akadálymentesítés</a><a href="https://iranyonline.hu/cimke/css/" rel="tag">CSS</a><a href="https://iranyonline.hu/cimke/font-ikonok/" rel="tag">font ikonok</a><a href="https://iranyonline.hu/cimke/frontend/" rel="tag">frontend</a><a href="https://iranyonline.hu/cimke/ikonok/" rel="tag">Ikonok</a><a href="https://iranyonline.hu/cimke/reszponziv-design/" rel="tag">reszponzív design</a><a href="https://iranyonline.hu/cimke/svg/" rel="tag">SVG</a><a href="https://iranyonline.hu/cimke/teljesitmeny/" rel="tag">teljesítmény</a><a href="https://iranyonline.hu/cimke/ui-ux/" rel="tag">UI/UX</a><a href="https://iranyonline.hu/cimke/webfejlesztes/" rel="tag">webfejlesztés</a> </span> </div> </figcaption> </article> <div class="row pb-3 related-posts wow animate fadeInUp" data-wow-delay=".3s"> <div class="col-12"> <span class="news-section-title five"><h5 class="f-heading">Kapcsolódó</h5></span> </div> <div class="col-lg-4 col-md-12 col-sm-12"> <article class="post grid-view-news-area "> <figcaption class="post-content"> <div class="entry-meta"> <span class="cat-links links-space"> <a class="links-bg web" href="https://iranyonline.hu/kategoria/web/"><span>Web</span></a> </span> </div> <header class="entry-header"> <h5 class="entry-title"><a href="https://iranyonline.hu/weboldalad-automatikus-telepitese-a-github-actions-es-a-netlify-segitsegevel/">Weboldalad automatikus telepítése a GitHub Actions és a Netlify segítségével</a></h5> </header> <div class="entry-meta align-self-center"> <span class="author"> <img alt='' src='https://secure.gravatar.com/avatar/d5cfd4daeb5b2382d60a464fe7a6b6495dfbb5e01d7c5be52235186ab7d21178?s=50&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/d5cfd4daeb5b2382d60a464fe7a6b6495dfbb5e01d7c5be52235186ab7d21178?s=100&d=mm&r=g 2x' class='img-fluid comment-img avatar-50 photo avatar-default' height='50' width='50' decoding='async'/> <a href="https://iranyonline.hu/author/iranyonline/">iranyonline</a> </span> <span class="posted-on"> <i class="fa-regular fa-clock"></i> <a href="https://iranyonline.hu/2025/09/"><time> szept 10, 2025</time></a> </span> </div> </figcaption> </article> </div> <div class="col-lg-4 col-md-12 col-sm-12"> <article class="post grid-view-news-area "> <figcaption class="post-content"> <div class="entry-meta"> <span class="cat-links links-space"> <a class="links-bg web" href="https://iranyonline.hu/kategoria/web/"><span>Web</span></a> </span> </div> <header class="entry-header"> <h5 class="entry-title"><a href="https://iranyonline.hu/github-pages-hozz-letre-ingyenes-weboldalt-percek-alatt/">GitHub Pages: hozz létre ingyenes weboldalt percek alatt</a></h5> </header> <div class="entry-meta align-self-center"> <span class="author"> <img alt='' src='https://secure.gravatar.com/avatar/d5cfd4daeb5b2382d60a464fe7a6b6495dfbb5e01d7c5be52235186ab7d21178?s=50&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/d5cfd4daeb5b2382d60a464fe7a6b6495dfbb5e01d7c5be52235186ab7d21178?s=100&d=mm&r=g 2x' class='img-fluid comment-img avatar-50 photo avatar-default' height='50' width='50' decoding='async'/> <a href="https://iranyonline.hu/author/iranyonline/">iranyonline</a> </span> <span class="posted-on"> <i class="fa-regular fa-clock"></i> <a href="https://iranyonline.hu/2025/09/"><time> szept 9, 2025</time></a> </span> </div> </figcaption> </article> </div> <div class="col-lg-4 col-md-12 col-sm-12"> <article class="post grid-view-news-area "> <figcaption class="post-content"> <div class="entry-meta"> <span class="cat-links links-space"> <a class="links-bg web" href="https://iranyonline.hu/kategoria/web/"><span>Web</span></a> </span> </div> <header class="entry-header"> <h5 class="entry-title"><a href="https://iranyonline.hu/kreativ-alahuzasok-es-szovegkiemelesek-css-sel-amik-kitunnek-a-tomegbol/">Kreatív aláhúzások és szövegkiemelések CSS-sel, amik kitűnnek a tömegből</a></h5> </header> <div class="entry-meta align-self-center"> <span class="author"> <img alt='' src='https://secure.gravatar.com/avatar/d5cfd4daeb5b2382d60a464fe7a6b6495dfbb5e01d7c5be52235186ab7d21178?s=50&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/d5cfd4daeb5b2382d60a464fe7a6b6495dfbb5e01d7c5be52235186ab7d21178?s=100&d=mm&r=g 2x' class='img-fluid comment-img avatar-50 photo avatar-default' height='50' width='50' loading='lazy' decoding='async'/> <a href="https://iranyonline.hu/author/iranyonline/">iranyonline</a> </span> <span class="posted-on"> <i class="fa-regular fa-clock"></i> <a href="https://iranyonline.hu/2025/09/"><time> szept 9, 2025</time></a> </span> </div> </figcaption> </article> </div> <div class="col-lg-4 col-md-12 col-sm-12"> <article class="post grid-view-news-area "> <figcaption class="post-content"> <div class="entry-meta"> <span class="cat-links links-space"> <a class="links-bg web" href="https://iranyonline.hu/kategoria/web/"><span>Web</span></a> </span> </div> <header class="entry-header"> <h5 class="entry-title"><a href="https://iranyonline.hu/a-css-all-unset-varazslata-a-komponensek-izolalasaban/">A CSS `all: unset` varázslata a komponensek izolálásában</a></h5> </header> <div class="entry-meta align-self-center"> <span class="author"> <img alt='' src='https://secure.gravatar.com/avatar/d5cfd4daeb5b2382d60a464fe7a6b6495dfbb5e01d7c5be52235186ab7d21178?s=50&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/d5cfd4daeb5b2382d60a464fe7a6b6495dfbb5e01d7c5be52235186ab7d21178?s=100&d=mm&r=g 2x' class='img-fluid comment-img avatar-50 photo avatar-default' height='50' width='50' loading='lazy' decoding='async'/> <a href="https://iranyonline.hu/author/iranyonline/">iranyonline</a> </span> <span class="posted-on"> <i class="fa-regular fa-clock"></i> <a href="https://iranyonline.hu/2025/09/"><time> szept 9, 2025</time></a> </span> </div> </figcaption> </article> </div> <div class="col-lg-4 col-md-12 col-sm-12"> <article class="post grid-view-news-area "> <figcaption class="post-content"> <div class="entry-meta"> <span class="cat-links links-space"> <a class="links-bg web" href="https://iranyonline.hu/kategoria/web/"><span>Web</span></a> </span> </div> <header class="entry-header"> <h5 class="entry-title"><a href="https://iranyonline.hu/hogyan-valassz-a-modern-css-keretrendszerek-kozul/">Hogyan válassz a modern CSS keretrendszerek közül?</a></h5> </header> <div class="entry-meta align-self-center"> <span class="author"> <img alt='' src='https://secure.gravatar.com/avatar/d5cfd4daeb5b2382d60a464fe7a6b6495dfbb5e01d7c5be52235186ab7d21178?s=50&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/d5cfd4daeb5b2382d60a464fe7a6b6495dfbb5e01d7c5be52235186ab7d21178?s=100&d=mm&r=g 2x' class='img-fluid comment-img avatar-50 photo avatar-default' height='50' width='50' loading='lazy' decoding='async'/> <a href="https://iranyonline.hu/author/iranyonline/">iranyonline</a> </span> <span class="posted-on"> <i class="fa-regular fa-clock"></i> <a href="https://iranyonline.hu/2025/09/"><time> szept 9, 2025</time></a> </span> </div> </figcaption> </article> </div> <div class="col-lg-4 col-md-12 col-sm-12"> <article class="post grid-view-news-area "> <figcaption class="post-content"> <div class="entry-meta"> <span class="cat-links links-space"> <a class="links-bg web" href="https://iranyonline.hu/kategoria/web/"><span>Web</span></a> </span> </div> <header class="entry-header"> <h5 class="entry-title"><a href="https://iranyonline.hu/miert-erdemes-elkerulni-az-inline-css-stilusokat/">Miért érdemes elkerülni az inline CSS stílusokat?</a></h5> </header> <div class="entry-meta align-self-center"> <span class="author"> <img alt='' src='https://secure.gravatar.com/avatar/d5cfd4daeb5b2382d60a464fe7a6b6495dfbb5e01d7c5be52235186ab7d21178?s=50&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/d5cfd4daeb5b2382d60a464fe7a6b6495dfbb5e01d7c5be52235186ab7d21178?s=100&d=mm&r=g 2x' class='img-fluid comment-img avatar-50 photo avatar-default' height='50' width='50' loading='lazy' decoding='async'/> <a href="https://iranyonline.hu/author/iranyonline/">iranyonline</a> </span> <span class="posted-on"> <i class="fa-regular fa-clock"></i> <a href="https://iranyonline.hu/2025/09/"><time> szept 9, 2025</time></a> </span> </div> </figcaption> </article> </div> <div class="col-lg-4 col-md-12 col-sm-12"> <article class="post grid-view-news-area "> <figcaption class="post-content"> <div class="entry-meta"> <span class="cat-links links-space"> <a class="links-bg web" href="https://iranyonline.hu/kategoria/web/"><span>Web</span></a> </span> </div> <header class="entry-header"> <h5 class="entry-title"><a href="https://iranyonline.hu/a-css-rovid-tortenete-a-kezdetektol-napjainkig/">A CSS rövid története: a kezdetektől napjainkig</a></h5> </header> <div class="entry-meta align-self-center"> <span class="author"> <img alt='' src='https://secure.gravatar.com/avatar/d5cfd4daeb5b2382d60a464fe7a6b6495dfbb5e01d7c5be52235186ab7d21178?s=50&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/d5cfd4daeb5b2382d60a464fe7a6b6495dfbb5e01d7c5be52235186ab7d21178?s=100&d=mm&r=g 2x' class='img-fluid comment-img avatar-50 photo avatar-default' height='50' width='50' loading='lazy' decoding='async'/> <a href="https://iranyonline.hu/author/iranyonline/">iranyonline</a> </span> <span class="posted-on"> <i class="fa-regular fa-clock"></i> <a href="https://iranyonline.hu/2025/09/"><time> szept 9, 2025</time></a> </span> </div> </figcaption> </article> </div> <div class="col-lg-4 col-md-12 col-sm-12"> <article class="post grid-view-news-area "> <figcaption class="post-content"> <div class="entry-meta"> <span class="cat-links links-space"> <a class="links-bg web" href="https://iranyonline.hu/kategoria/web/"><span>Web</span></a> </span> </div> <header class="entry-header"> <h5 class="entry-title"><a href="https://iranyonline.hu/a-css-font-variant-tulajdonsag-a-professzionalis-tipografiaert/">A CSS `font-variant` tulajdonság a professzionális tipográfiáért</a></h5> </header> <div class="entry-meta align-self-center"> <span class="author"> <img alt='' src='https://secure.gravatar.com/avatar/d5cfd4daeb5b2382d60a464fe7a6b6495dfbb5e01d7c5be52235186ab7d21178?s=50&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/d5cfd4daeb5b2382d60a464fe7a6b6495dfbb5e01d7c5be52235186ab7d21178?s=100&d=mm&r=g 2x' class='img-fluid comment-img avatar-50 photo avatar-default' height='50' width='50' loading='lazy' decoding='async'/> <a href="https://iranyonline.hu/author/iranyonline/">iranyonline</a> </span> <span class="posted-on"> <i class="fa-regular fa-clock"></i> <a href="https://iranyonline.hu/2025/09/"><time> szept 9, 2025</time></a> </span> </div> </figcaption> </article> </div> <div class="col-lg-4 col-md-12 col-sm-12"> <article class="post grid-view-news-area "> <figcaption class="post-content"> <div class="entry-meta"> <span class="cat-links links-space"> <a class="links-bg web" href="https://iranyonline.hu/kategoria/web/"><span>Web</span></a> </span> </div> <header class="entry-header"> <h5 class="entry-title"><a href="https://iranyonline.hu/stilusos-tooltipek-keszitese-csak-html-es-css-hasznalataval/">Stílusos tooltipek készítése csak HTML és CSS használatával</a></h5> </header> <div class="entry-meta align-self-center"> <span class="author"> <img alt='' src='https://secure.gravatar.com/avatar/d5cfd4daeb5b2382d60a464fe7a6b6495dfbb5e01d7c5be52235186ab7d21178?s=50&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/d5cfd4daeb5b2382d60a464fe7a6b6495dfbb5e01d7c5be52235186ab7d21178?s=100&d=mm&r=g 2x' class='img-fluid comment-img avatar-50 photo avatar-default' height='50' width='50' loading='lazy' decoding='async'/> <a href="https://iranyonline.hu/author/iranyonline/">iranyonline</a> </span> <span class="posted-on"> <i class="fa-regular fa-clock"></i> <a href="https://iranyonline.hu/2025/09/"><time> szept 9, 2025</time></a> </span> </div> </figcaption> </article> </div> <div class="col-lg-4 col-md-12 col-sm-12"> <article class="post grid-view-news-area "> <figcaption class="post-content"> <div class="entry-meta"> <span class="cat-links links-space"> <a class="links-bg web" href="https://iranyonline.hu/kategoria/web/"><span>Web</span></a> </span> </div> <header class="entry-header"> <h5 class="entry-title"><a href="https://iranyonline.hu/a-css-backdrop-filter-a-lenyugozo-uveghatasert-glassmorphism/">A CSS `backdrop-filter` a lenyűgöző üveghatásért (glassmorphism)</a></h5> </header> <div class="entry-meta align-self-center"> <span class="author"> <img alt='' src='https://secure.gravatar.com/avatar/d5cfd4daeb5b2382d60a464fe7a6b6495dfbb5e01d7c5be52235186ab7d21178?s=50&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/d5cfd4daeb5b2382d60a464fe7a6b6495dfbb5e01d7c5be52235186ab7d21178?s=100&d=mm&r=g 2x' class='img-fluid comment-img avatar-50 photo avatar-default' height='50' width='50' loading='lazy' decoding='async'/> <a href="https://iranyonline.hu/author/iranyonline/">iranyonline</a> </span> <span class="posted-on"> <i class="fa-regular fa-clock"></i> <a href="https://iranyonline.hu/2025/09/"><time> szept 9, 2025</time></a> </span> </div> </figcaption> </article> </div> </div> <article class="theme-comment-form wow animate fadeInUp " data-wow-delay=".3s"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title"><span class="news-section-title five"><h5 class="f-heading">Leave a Reply</h5></span> <small><a rel="nofollow" id="cancel-comment-reply-link" href="/modern-webes-ikonok-hasznalata-css-sel-svg-vs-font-ikonok/#respond" style="display:none;">Válasz megszakítása</a></small></h3><form action="https://iranyonline.hu/wp-comments-post.php" method="post" id="action" class="comment-form"><p class="comment-notes"><span id="email-notes">Az e-mail címet nem tesszük közzé.</span> <span class="required-field-message">A kötelező mezőket <span class="required">*</span> karakterrel jelöltük</span></p><div class="form-group mb-3"><label>Comment</label> <textarea id="comments" rows="5" class="form-control" name="comment" type="text"></textarea></div><div class="form-group mb-3"><label>Name<span class="required">*</span></label><input class="form-control" name="author" id="author" value="" type="text"/></div> <div class="form-group mb-3"><label>Email<span class="required">*</span></label><input class="form-control" name="email" id="email" value="" type="email" ></div> <p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /> <label for="wp-comment-cookies-consent">A nevem, e-mail címem, és weboldalcímem mentése a böngészőben a következő hozzászólásomhoz.</label></p> <p class="form-submit"><input name="submit" type="submit" id="send_button" class="submit" value="Submit" /> <input type='hidden' name='comment_post_ID' value='13904' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p></form> </div> </div>  <div class="col-lg-4 col-md-6 col-sm-12"> <div class="sidebar"> <aside id="block-2" data-wow-delay=".3s" class="wow animate fadeInUp widget side-bar-widget sidebar-main widget_block widget_search"><form role="search" method="get" action="https://iranyonline.hu/" class="wp-block-search__button-outside wp-block-search__text-button wp-block-search" ><label class="wp-block-search__label" for="wp-block-search__input-1" >Keresés</label><div class="wp-block-search__inside-wrapper " ><input class="wp-block-search__input" id="wp-block-search__input-1" placeholder="" value="" type="search" name="s" required /><button aria-label="Keresés" class="wp-block-search__button wp-element-button" type="submit" >Keresés</button></div></form></aside><aside id="newsexo_list_view_news2-4" data-wow-delay=".3s" class="wow animate fadeInUp widget side-bar-widget sidebar-main widget_newsexo_list_view_news2"><h5 class="wp-block-heading">Legfrissebbek</h5> <div class="list-view-post-widget"> <article class="post"> <figure class="post-thumbnail"> </figure> <figcaption class="post-content"> <header class="entry-header"> <h6 class="entry-title"> <a href="https://iranyonline.hu/a-kodellenorzes-code-review-legjobb-gyakorlatai-a-githubon/" title="A kódellenőrzés (code review) legjobb gyakorlatai a GitHubon">A kódellenőrzés (code review) legjobb gyakorlatai a GitHubon</a> </h6> </header> <div class="entry-meta"> <span class="posted-on"> <i class="fa-regular fa-clock"></i> <a href="https://iranyonline.hu/2025/09/"><time> szept 10, 2025</time></a> </span> </div> </figcaption> </article> <article class="post"> <figure class="post-thumbnail"> </figure> <figcaption class="post-content"> <header class="entry-header"> <h6 class="entry-title"> <a href="https://iranyonline.hu/hozz-letre-sajat-github-profil-readme-t-ami-kiemel-a-tomegbol/" title="Hozz létre saját GitHub profil README-t, ami kiemel a tömegből">Hozz létre saját GitHub profil README-t, ami kiemel a tömegből</a> </h6> </header> <div class="entry-meta"> <span class="posted-on"> <i class="fa-regular fa-clock"></i> <a href="https://iranyonline.hu/2025/09/"><time> szept 10, 2025</time></a> </span> </div> </figcaption> </article> <article class="post"> <figure class="post-thumbnail"> </figure> <figcaption class="post-content"> <header class="entry-header"> <h6 class="entry-title"> <a href="https://iranyonline.hu/a-github-actions-vs-jenkins-melyiket-valaszd/" title="A GitHub Actions vs Jenkins: melyiket válaszd?">A GitHub Actions vs Jenkins: melyiket válaszd?</a> </h6> </header> <div class="entry-meta"> <span class="posted-on"> <i class="fa-regular fa-clock"></i> <a href="https://iranyonline.hu/2025/09/"><time> szept 10, 2025</time></a> </span> </div> </figcaption> </article> <article class="post"> <figure class="post-thumbnail"> </figure> <figcaption class="post-content"> <header class="entry-header"> <h6 class="entry-title"> <a href="https://iranyonline.hu/igy-hasznald-a-githubot-a-szakdolgozatod-irasa-kozben/" title="Így használd a GitHubot a szakdolgozatod írása közben">Így használd a GitHubot a szakdolgozatod írása közben</a> </h6> </header> <div class="entry-meta"> <span class="posted-on"> <i class="fa-regular fa-clock"></i> <a href="https://iranyonline.hu/2025/09/"><time> szept 10, 2025</time></a> </span> </div> </figcaption> </article> <article class="post"> <figure class="post-thumbnail"> </figure> <figcaption class="post-content"> <header class="entry-header"> <h6 class="entry-title"> <a href="https://iranyonline.hu/a-mobilfejlesztes-munkafolyamatai-a-githubon/" title="A mobilfejlesztés munkafolyamatai a GitHubon">A mobilfejlesztés munkafolyamatai a GitHubon</a> </h6> </header> <div class="entry-meta"> <span class="posted-on"> <i class="fa-regular fa-clock"></i> <a href="https://iranyonline.hu/2025/09/"><time> szept 10, 2025</time></a> </span> </div> </figcaption> </article> </div> </aside> </div> </div> </div> </div> </section>  <section class="sponsored-news-section"> <div class="container-full">  <div class="row mb-space-20"> <div class="col-12"> <span class="news-section-title wow animate fadeInUp" data-wow-delay=".3s"> <h5 class="f-heading">Lehet lemaradtál <i class="fa-solid fa-bullhorn"></i></h5> </span> </div> <div class="col-12"> <div class="row"> <div class="col-lg-3 col-md-6 col-sm-12"> <article class="post grid-view-news-area wow animate zoomIn " data-wow-delay=".3s"> <figure class="post-thumbnail"> <a class="img-block" href="https://iranyonline.hu/igy-hasznald-a-githubot-a-szakdolgozatod-irasa-kozben/"></a> </figure> <figcaption class="post-content"> <div class="entry-meta"> <span class="cat-links links-space"> <a class="links-bg tudastar" href="https://iranyonline.hu/kategoria/tudastar/"><span>Tudástár</span></a> </span> </div> <header class="entry-header"> <h5 class="entry-title"><a href="https://iranyonline.hu/igy-hasznald-a-githubot-a-szakdolgozatod-irasa-kozben/">Így használd a GitHubot a szakdolgozatod írása közben</a></h5> </header> <div class="entry-meta meta-two align-self-center"> <span class="author"> <img alt='' src='https://secure.gravatar.com/avatar/d5cfd4daeb5b2382d60a464fe7a6b6495dfbb5e01d7c5be52235186ab7d21178?s=50&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/d5cfd4daeb5b2382d60a464fe7a6b6495dfbb5e01d7c5be52235186ab7d21178?s=100&d=mm&r=g 2x' class='img-fluid comment-img avatar-50 photo avatar-default' height='50' width='50' loading='lazy' decoding='async'/> <a href="https://iranyonline.hu/author/iranyonline/">iranyonline</a> </span> <span class="posted-on"><i class="fa-regular fa-clock"></i> <a href="https://iranyonline.hu/2025/09/"><time> szept 10, 2025</time></a> </span> </div> </figcaption> </article> </div> <div class="col-lg-3 col-md-6 col-sm-12"> <article class="post grid-view-news-area wow animate zoomIn " data-wow-delay=".3s"> <figure class="post-thumbnail"> <a class="img-block" href="https://iranyonline.hu/weboldalad-automatikus-telepitese-a-github-actions-es-a-netlify-segitsegevel/"></a> </figure> <figcaption class="post-content"> <div class="entry-meta"> <span class="cat-links links-space"> <a class="links-bg web" href="https://iranyonline.hu/kategoria/web/"><span>Web</span></a> </span> </div> <header class="entry-header"> <h5 class="entry-title"><a href="https://iranyonline.hu/weboldalad-automatikus-telepitese-a-github-actions-es-a-netlify-segitsegevel/">Weboldalad automatikus telepítése a GitHub Actions és a Netlify segítségével</a></h5> </header> <div class="entry-meta meta-two align-self-center"> <span class="author"> <img alt='' src='https://secure.gravatar.com/avatar/d5cfd4daeb5b2382d60a464fe7a6b6495dfbb5e01d7c5be52235186ab7d21178?s=50&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/d5cfd4daeb5b2382d60a464fe7a6b6495dfbb5e01d7c5be52235186ab7d21178?s=100&d=mm&r=g 2x' class='img-fluid comment-img avatar-50 photo avatar-default' height='50' width='50' loading='lazy' decoding='async'/> <a href="https://iranyonline.hu/author/iranyonline/">iranyonline</a> </span> <span class="posted-on"><i class="fa-regular fa-clock"></i> <a href="https://iranyonline.hu/2025/09/"><time> szept 10, 2025</time></a> </span> </div> </figcaption> </article> </div> <div class="col-lg-3 col-md-6 col-sm-12"> <article class="post grid-view-news-area wow animate zoomIn " data-wow-delay=".3s"> <figure class="post-thumbnail"> <a class="img-block" href="https://iranyonline.hu/keszen-allsz-a-jovore-ismerd-meg-a-github-codespaces-t/"></a> </figure> <figcaption class="post-content"> <div class="entry-meta"> <span class="cat-links links-space"> <a class="links-bg tech" href="https://iranyonline.hu/kategoria/tech/"><span>Tech</span></a> </span> </div> <header class="entry-header"> <h5 class="entry-title"><a href="https://iranyonline.hu/keszen-allsz-a-jovore-ismerd-meg-a-github-codespaces-t/">Készen állsz a jövőre? Ismerd meg a GitHub Codespaces-t!</a></h5> </header> <div class="entry-meta meta-two align-self-center"> <span class="author"> <img alt='' src='https://secure.gravatar.com/avatar/d5cfd4daeb5b2382d60a464fe7a6b6495dfbb5e01d7c5be52235186ab7d21178?s=50&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/d5cfd4daeb5b2382d60a464fe7a6b6495dfbb5e01d7c5be52235186ab7d21178?s=100&d=mm&r=g 2x' class='img-fluid comment-img avatar-50 photo avatar-default' height='50' width='50' loading='lazy' decoding='async'/> <a href="https://iranyonline.hu/author/iranyonline/">iranyonline</a> </span> <span class="posted-on"><i class="fa-regular fa-clock"></i> <a href="https://iranyonline.hu/2025/09/"><time> szept 9, 2025</time></a> </span> </div> </figcaption> </article> </div> <div class="col-lg-3 col-md-6 col-sm-12"> <article class="post grid-view-news-area wow animate zoomIn " data-wow-delay=".3s"> <figure class="post-thumbnail"> <a class="img-block" href="https://iranyonline.hu/a-github-nem-csak-programozoknak-irok-es-tervezok-kezikonyve/"></a> </figure> <figcaption class="post-content"> <div class="entry-meta"> <span class="cat-links links-space"> <a class="links-bg tudastar" href="https://iranyonline.hu/kategoria/tudastar/"><span>Tudástár</span></a> </span> </div> <header class="entry-header"> <h5 class="entry-title"><a href="https://iranyonline.hu/a-github-nem-csak-programozoknak-irok-es-tervezok-kezikonyve/">A GitHub nem csak programozóknak: írók és tervezők kézikönyve</a></h5> </header> <div class="entry-meta meta-two align-self-center"> <span class="author"> <img alt='' src='https://secure.gravatar.com/avatar/d5cfd4daeb5b2382d60a464fe7a6b6495dfbb5e01d7c5be52235186ab7d21178?s=50&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/d5cfd4daeb5b2382d60a464fe7a6b6495dfbb5e01d7c5be52235186ab7d21178?s=100&d=mm&r=g 2x' class='img-fluid comment-img avatar-50 photo avatar-default' height='50' width='50' loading='lazy' decoding='async'/> <a href="https://iranyonline.hu/author/iranyonline/">iranyonline</a> </span> <span class="posted-on"><i class="fa-regular fa-clock"></i> <a href="https://iranyonline.hu/2025/09/"><time> szept 9, 2025</time></a> </span> </div> </figcaption> </article> </div> </div> </div> </div>  </div> </section>  <div style="display: none;"><script id="_wau9bb">var _wau = _wau || []; _wau.push(["small", "35fbpegzsy", "9bb"]);</script><script async src="//waust.at/s.js"></script></div>  <footer class="site-footer site-footer-overlay"> <div class="container-full">  <div class="row footer-sidebar wow animate zoomIn" data-wow-delay="0.3s"> <div class="col-lg-3 col-md-6 col-sm-12"> <aside id="block-15" data-wow-delay=".3s" class="widget footer-sidebar-one wow animate fadeInUp widget_block"> <div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained"> <img decoding="async" src="https://iranyonline.hu/wp-content/uploads/2025/03/cropped-irany-online-logo.png" class="img-fluid" alt="Newsexo logo"><br /> <p>Célunk, hogy hasznos tanácsokkal és tartalmakkal lássunk el téged miközben a világ híreiről és újdonságairól is értesülhetsz.</p> </div></div> </aside> </div> <div class="col-lg-3 col-md-6 col-sm-12"> <aside id="newsexo_list_view_news2-3" data-wow-delay=".3s" class="widget footer-sidebar-two wow animate fadeInUp widget_newsexo_list_view_news2"><h5 class="wp-block-heading">Latest News</h5> <div class="list-view-post-widget"> </div> </aside> </div> <div class="col-lg-3 col-md-6 col-sm-12"> <aside id="block-16" data-wow-delay=".3s" class="widget footer-sidebar-three wow animate fadeInUp widget_block"> <div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained"> <h5 class="wp-block-heading">Categories</h5> <ul class="wp-block-categories-list wp-block-categories"> <li class="cat-item cat-item-1"><a href="https://iranyonline.hu/kategoria/egyeb/">Egyéb</a> </li> <li class="cat-item cat-item-121"><a href="https://iranyonline.hu/kategoria/gazdasag/">Gazdaság</a> </li> <li class="cat-item cat-item-93"><a href="https://iranyonline.hu/kategoria/hirek/">Hírek</a> </li> <li class="cat-item cat-item-536"><a href="https://iranyonline.hu/kategoria/mobil/">Mobil</a> </li> <li class="cat-item cat-item-5337"><a href="https://iranyonline.hu/kategoria/szoftver/">Szoftver</a> </li> <li class="cat-item cat-item-120"><a href="https://iranyonline.hu/kategoria/tech/">Tech</a> </li> <li class="cat-item cat-item-402"><a href="https://iranyonline.hu/kategoria/tudastar/">Tudástár</a> </li> <li class="cat-item cat-item-119"><a href="https://iranyonline.hu/kategoria/vallalkozas/">Vállalkozás</a> </li> <li class="cat-item cat-item-2486"><a href="https://iranyonline.hu/kategoria/videojatek/">Videójáték</a> </li> <li class="cat-item cat-item-94"><a href="https://iranyonline.hu/kategoria/web/">Web</a> </li> </ul></div></div> </aside> </div> <div class="col-lg-3 col-md-6 col-sm-12"> <aside id="block-17" data-wow-delay=".3s" class="widget footer-sidebar-four wow animate fadeInUp widget_block"> <div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained"> <h5 class="wp-block-heading">Sign Up For Our Newsletter</h5> <p>Subscribe to our newsletter to get our newest articles instantly!</p> <form class="subscribe-area"> <input class="form-control" type="text" placeholder="Your email address" aria-label="Your email address"> <button class="btn-subscribe" type="button">Subscribe</button> </form> </div></div> </aside> </div> </div>  <div class="row"> <div class="col-12"> <div class="site-info-border"></div> </div> <div class="col-md-6 col-sm-12"> <div class="site-info text-left"> <p> Copyright © 2025 | Irány Online! | Minden jog fenntartva. <span class="sep"> | </span> <a href="https://themearile.com/provo-news-theme/" target="_blank">Provo News</a> by <a href="https://themearile.com" target="_blank">ThemeArile</a> </a> </p> </div> </div> <div class="col-md-6 col-sm-12"> <div class="menu-footer-menu-container"><ul id="menu-footer-menu" class="site-info-menu"><li id="menu-item-539" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-539"><a class="nav-link" href="https://iranyonline.hu/">Kezdőlap</a></li> <li id="menu-item-540" class="menu-item menu-item-type-post_type menu-item-object-page current_page_parent menu-item-540"><a class="nav-link" href="https://iranyonline.hu/blog/">Blog</a></li> <li id="menu-item-543" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-543"><a class="nav-link" href="https://iranyonline.hu/privacy-policy-2/">Adatvédelem</a></li> <li id="menu-item-542" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-542"><a class="nav-link" href="https://iranyonline.hu/contact/">Kapcsolat</a></li> </ul></div> </div> </div> </div> </footer>   <div class="page-scroll-up"><a href="#totop"><i class="fa fa-angle-up"></i></a></div>  <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"\/*"},{"not":{"href_matches":["\/wp-*.php","\/wp-admin\/*","\/wp-content\/uploads\/*","\/wp-content\/*","\/wp-content\/plugins\/*","\/wp-content\/themes\/provo-news\/*","\/wp-content\/themes\/newsexo\/*","\/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <style type="text/css"> .site-logo img.custom-logo { max-width: 513px; height: auto; } .logo-banner { background: #17212c url(https://iranyonline.hu/wp-content/themes/provo-news/assets/img/header-banner.jpg); background-attachment: scroll; background-position: top center; background-repeat: no-repeat; background-size: cover; } .logo-banner-overlay::before { background: rgba(0,0,0,0.75) !important; } </style> <script> // This JS added for the Toggle button to work with the focus element. jQuery('.navbar-toggler').click(function(){ document.addEventListener('keydown', function(e) { let isTabPressed = e.key === 'Tab' || e.keyCode === 9; if (!isTabPressed) { return; } const focusableElements = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'; const modal = document.querySelector('.navbar.navbar-expand-lg'); // select the modal by it's id const firstFocusableElement = modal.querySelectorAll(focusableElements)[0]; // get first element to be focused inside modal const focusableContent = modal.querySelectorAll(focusableElements); const lastFocusableElement = focusableContent[focusableContent.length - 1]; // get last element to be focused inside modal if (e.shiftKey) { // if shift key pressed for shift + tab combination if (document.activeElement === firstFocusableElement) { lastFocusableElement.focus(); // add focus for the last focusable element e.preventDefault(); } } else { // if tab key is pressed if (document.activeElement === lastFocusableElement) { // if focused has reached to last focusable element then focus first focusable element after pressing tab firstFocusableElement.focus(); // add focus for the first focusable element e.preventDefault(); } } }); }); </script> <script type="text/javascript" src="https://iranyonline.hu/wp-includes/js/dist/hooks.min.js?ver=4d63a3d491d11ffd8ac6" id="wp-hooks-js"></script> <script type="text/javascript" src="https://iranyonline.hu/wp-includes/js/dist/i18n.min.js?ver=5e580eb46a90c2b997e6" id="wp-i18n-js"></script> <script type="text/javascript" id="wp-i18n-js-after"> /* <![CDATA[ */ wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } ); /* ]]> */ </script> <script type="text/javascript" src="https://iranyonline.hu/wp-content/plugins/contact-form-7/includes/swv/js/index.js?ver=6.0.4" id="swv-js"></script> <script type="text/javascript" id="contact-form-7-js-translations"> /* <![CDATA[ */ ( function( domain, translations ) { var localeData = translations.locale_data[ domain ] || translations.locale_data.messages; localeData[""].domain = domain; wp.i18n.setLocaleData( localeData, domain ); } )( "contact-form-7", {"translation-revision-date":"2023-06-06 12:31:46+0000","generator":"GlotPress\/4.0.1","domain":"messages","locale_data":{"messages":{"":{"domain":"messages","plural-forms":"nplurals=2; plural=n != 1;","lang":"hu"},"Error:":["Hiba:"]}},"comment":{"reference":"includes\/js\/index.js"}} ); /* ]]> */ </script> <script type="text/javascript" id="contact-form-7-js-before"> /* <![CDATA[ */ var wpcf7 = { "api": { "root": "https:\/\/iranyonline.hu\/wp-json\/", "namespace": "contact-form-7\/v1" } }; /* ]]> */ </script> <script type="text/javascript" src="https://iranyonline.hu/wp-content/plugins/contact-form-7/includes/js/index.js?ver=6.0.4" id="contact-form-7-js"></script> <script type="text/javascript" src="https://iranyonline.hu/wp-content/themes/newsexo/assets/js/skip-link-focus-fix.js?ver=20151215" id="newsexo-skip-link-focus-fix-js"></script> <script type="text/javascript" src="https://iranyonline.hu/wp-includes/js/comment-reply.min.js?ver=5d4c1d33551383247913e7484478707c" id="comment-reply-js" async="async" data-wp-strategy="async"></script> </body> </html>