Kihagyás

10.2. fejezet

Ikonok

Az ikonok kisméretű grafikai elemek, amelyeket gyakran használnak a felhasználói felületekben, hogy vizuálisan azonosítsanak különböző funkciókat, mint például menüelemek, gombok vagy információs jelzések. Az ikonok használata lehetőséget biztosít arra, hogy a felhasználók gyorsabban és könnyebben navigáljanak az oldalon.

A Google Icons (Google Ikonok) egy népszerű ikon készlet, amelyet a Google fejlesztett ki. Ezt a könnyen használható ikon könyvtárat különféle webes projektekben alkalmazhatjuk, hogy vizuálisan vonzó és felhasználóbarát felületeket hozzunk létre. A Google Icons előnye, hogy könnyen integrálható a HTML-be és stílusozható CSS-sel.

A Google Icons használatához először hozzá kell adnunk a Google Icons stíluslapot a HTML dokumentum fej részéhez.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google Icons Példa</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <style>
        .icon {
            font-size: 48px;
            color: blue;
        }
    </style>
</head>
<body>
<h2>Google Icons Használata</h2>
<i class="material-icons">home</i> Home
<i class="material-icons">email</i> Email
<i class="material-icons icon">face</i> Face (Stílusozott)
</body>
</html>
  • <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">: Ezzel az URL-lel importáljuk a Google Icons CSS fájlt a HTML dokumentumba.
  • <i class="material-icons">home</i>: Az ikon megjelenítéséhez az <i> elemet használjuk a material-icons osztállyal. Az ikon neve home.
  • Stílusozott ikon: Az utolsó ikonhoz egy egyedi CSS osztály (.icon) lett hozzáadva a stílusozás céljából, amely megváltoztatja az ikon méretét és színét.

Összehasonlítás Más Ikon Megoldásokkal

  • Google Icons
    • Előnyök: Könnyű integráció, számos ikon, egyszerű stílusozás CSS-sel, jó böngésző támogatás.
    • Hátrányok: Internetkapcsolat szükséges a Google Fonts szervíz eléréséhez.
  • Font Awesome
    • Előnyök: Hatékony és széles körben támogatott, sokféle ikon, plug and play használat.
    • Hátrányok: Némi tanulási görbe a komplex használathoz.
  • SVG Ikonok
    • Előnyök: Nagy felbontású, könnyen méretezhető, testreszabható.
    • Hátrányok: Komplexebb szintaxis, külön fájl szükséges.
Utolsó frissítés: 2024-08-16 16:51:30