14 – CSS – ikony
https://www.w3schools.com/css/css_icons.asp
Zadanie 1 — Lista ikon z różnymi stylami
Cel: Stwórz prostą stronę HTML, na której wyświetlisz listę ikon z Font Awesome o różnym stylu i kolorze.
Wymagania
-
Dołącz bibliotekę Font Awesome przez
<script>lub<link>. -
Wstaw co najmniej 5 różnych ikon z Font Awesome (np. chmurka, serce, samochód itp.).
-
Ustaw różne kolory i rozmiary ikon w CSS.
Przykładowy efekt
-
ikonki mają różne kolory i rozmiary
-
każda ikona ma podpis
Przykładowy kod (do inspiracji)
Zadanie 2 — Ikony w przyciskach z Google Icons
Cel: Użyj iconów z Google Icons, aby dodać je do kilku przycisków w formularzu.
Wymagania
-
Dołącz bibliotekę Google Icons w
<head>. -
Stwórz trzy przyciski, każdy z ikoną (np. wyszukaj, ulubione, ustawienia).
-
Użyj CSS, aby:
-
każdy przycisk miał ramkę i efekt hover (zmiana koloru)
-
ikona zmieniała kolor przy hover
-
Przykładowy efekt
Przyciski wyglądają jak przyciski akcji: 🔍❤️⚙️
Przykładowy kod (do inspiracji)
