{"id":595,"date":"2026-01-09T12:55:35","date_gmt":"2026-01-09T11:55:35","guid":{"rendered":"https:\/\/informatyka.odkrywajto.pl\/?p=595"},"modified":"2026-01-09T12:57:45","modified_gmt":"2026-01-09T11:57:45","slug":"14-css-ikony","status":"publish","type":"post","link":"https:\/\/informatyka.odkrywajto.pl\/?p=595","title":{"rendered":"14 – CSS – ikony"},"content":{"rendered":"

https:\/\/www.w3schools.com\/css\/css_icons.asp<\/a><\/p>\n

Zadanie 1 \u2014 Lista ikon z r\u00f3\u017cnymi stylami<\/h2>\n

Cel:<\/strong> Stw\u00f3rz prost\u0105 stron\u0119 HTML, na kt\u00f3rej wy\u015bwietlisz list\u0119 ikon z Font Awesome<\/strong> o r\u00f3\u017cnym stylu i kolorze.<\/p>\n

Wymagania<\/h3>\n
    \n
  1. \n

    Do\u0142\u0105cz bibliotek\u0119 Font Awesome przez <script><\/code> lub <link><\/code>.<\/p>\n<\/li>\n

  2. \n

    Wstaw co najmniej 5 r\u00f3\u017cnych ikon<\/strong> z Font Awesome (np. chmurka, serce, samoch\u00f3d itp.).<\/p>\n<\/li>\n

  3. \n

    Ustaw r\u00f3\u017cne kolory i rozmiary ikon w CSS.<\/p>\n<\/li>\n<\/ol>\n

    Przyk\u0142adowy efekt<\/h3>\n
      \n
    • \n

      ikonki maj\u0105 r\u00f3\u017cne kolory i rozmiary<\/p>\n<\/li>\n

    • \n

      ka\u017cda ikona ma podpis<\/p>\n<\/li>\n<\/ul>\n

      Przyk\u0142adowy kod (do inspiracji)<\/h3>\n

      \"14-ikony<\/p>\n

      Zadanie 2 \u2014 Ikony w przyciskach z Google Icons<\/h2>\n

      Cel:<\/strong> U\u017cyj icon\u00f3w z Google Icons<\/strong>, aby doda\u0107 je do kilku przycisk\u00f3w w formularzu.<\/p>\n

      Wymagania<\/h3>\n
        \n
      1. \n

        Do\u0142\u0105cz bibliotek\u0119 Google Icons w <head><\/code>.<\/p>\n<\/li>\n

      2. \n

        Stw\u00f3rz trzy przyciski<\/strong>, ka\u017cdy z ikon\u0105 (np. wyszukaj<\/em>, ulubione<\/em>, ustawienia<\/em>).<\/p>\n<\/li>\n

      3. \n

        U\u017cyj CSS, aby:<\/p>\n

          \n
        • \n

          ka\u017cdy przycisk mia\u0142 ramk\u0119 i efekt hover (zmiana koloru)<\/p>\n<\/li>\n

        • \n

          ikona zmienia\u0142a kolor przy hover<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n

          Przyk\u0142adowy efekt<\/h3>\n

          Przyciski wygl\u0105daj\u0105 jak przyciski akcji: \ud83d\udd0d\u2764\ufe0f\u2699\ufe0f<\/p>\n

          Przyk\u0142adowy kod (do inspiracji)<\/h3>\n

          \"14a-ikony<\/p>\n","protected":false},"excerpt":{"rendered":"

          https:\/\/www.w3schools.com\/css\/css_icons.asp Zadanie 1 \u2014 Lista ikon z r\u00f3\u017cnymi stylami Cel: Stw\u00f3rz prost\u0105 stron\u0119 HTML, na kt\u00f3rej wy\u015bwietlisz list\u0119 ikon z Font Awesome o r\u00f3\u017cnym stylu i kolorze. Wymagania Do\u0142\u0105cz bibliotek\u0119 Font Awesome przez <script> lub <link>. Wstaw co najmniej 5 r\u00f3\u017cnych ikon z Font Awesome (np. chmurka, serce, samoch\u00f3d itp.). Ustaw r\u00f3\u017cne kolory i rozmiary […]<\/p>\n","protected":false},"author":1,"featured_media":598,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,14,52],"tags":[18,57,58],"class_list":["post-595","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-pomoce","category-tutoriale","category-zadania","tag-css","tag-ikony","tag-style"],"yoast_head":"\n14 - CSS - ikony - Informatyka Zadania<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/informatyka.odkrywajto.pl\/?p=595\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"14 - CSS - ikony - Informatyka Zadania\" \/>\n<meta property=\"og:description\" content=\"https:\/\/www.w3schools.com\/css\/css_icons.asp Zadanie 1 \u2014 Lista ikon z r\u00f3\u017cnymi stylami Cel: Stw\u00f3rz prost\u0105 stron\u0119 HTML, na kt\u00f3rej wy\u015bwietlisz list\u0119 ikon z Font Awesome o r\u00f3\u017cnym stylu i kolorze. Wymagania Do\u0142\u0105cz bibliotek\u0119 Font Awesome przez <script> lub <link>. Wstaw co najmniej 5 r\u00f3\u017cnych ikon z Font Awesome (np. chmurka, serce, samoch\u00f3d itp.). Ustaw r\u00f3\u017cne kolory i rozmiary […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/informatyka.odkrywajto.pl\/?p=595\" \/>\n<meta property=\"og:site_name\" content=\"Informatyka Zadania\" \/>\n<meta property=\"article:published_time\" content=\"2026-01-09T11:55:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-09T11:57:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/informatyka.odkrywajto.pl\/wp-content\/uploads\/2026\/01\/Braun_and_Hogenberg_Zamosc.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"600\" \/>\n\t<meta property=\"og:image:height\" content=\"465\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"DuzyZajac\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Napisane przez\" \/>\n\t<meta name=\"twitter:data1\" content=\"DuzyZajac\" \/>\n\t<meta name=\"twitter:label2\" content=\"Szacowany czas czytania\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minuty\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/informatyka.odkrywajto.pl\\\/?p=595#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/informatyka.odkrywajto.pl\\\/?p=595\"},\"author\":{\"name\":\"DuzyZajac\",\"@id\":\"https:\\\/\\\/informatyka.odkrywajto.pl\\\/#\\\/schema\\\/person\\\/2bf15d5917c9daa73c658396c450c55a\"},\"headline\":\"14 – CSS – ikony\",\"datePublished\":\"2026-01-09T11:55:35+00:00\",\"dateModified\":\"2026-01-09T11:57:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/informatyka.odkrywajto.pl\\\/?p=595\"},\"wordCount\":171,\"publisher\":{\"@id\":\"https:\\\/\\\/informatyka.odkrywajto.pl\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/informatyka.odkrywajto.pl\\\/?p=595#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/informatyka.odkrywajto.pl\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/Braun_and_Hogenberg_Zamosc.jpg\",\"keywords\":[\"css\",\"ikony\",\"style\"],\"articleSection\":[\"Pomoce\",\"Tutoriale\",\"zadania\"],\"inLanguage\":\"pl-PL\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/informatyka.odkrywajto.pl\\\/?p=595\",\"url\":\"https:\\\/\\\/informatyka.odkrywajto.pl\\\/?p=595\",\"name\":\"14 - CSS - ikony - Informatyka Zadania\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/informatyka.odkrywajto.pl\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/informatyka.odkrywajto.pl\\\/?p=595#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/informatyka.odkrywajto.pl\\\/?p=595#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/informatyka.odkrywajto.pl\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/Braun_and_Hogenberg_Zamosc.jpg\",\"datePublished\":\"2026-01-09T11:55:35+00:00\",\"dateModified\":\"2026-01-09T11:57:45+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/informatyka.odkrywajto.pl\\\/?p=595#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/informatyka.odkrywajto.pl\\\/?p=595\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\\\/\\\/informatyka.odkrywajto.pl\\\/?p=595#primaryimage\",\"url\":\"https:\\\/\\\/informatyka.odkrywajto.pl\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/Braun_and_Hogenberg_Zamosc.jpg\",\"contentUrl\":\"https:\\\/\\\/informatyka.odkrywajto.pl\\\/wp-content\\\/uploads\\\/2026\\\/01\\\/Braun_and_Hogenberg_Zamosc.jpg\",\"width\":600,\"height\":465},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/informatyka.odkrywajto.pl\\\/?p=595#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/informatyka.odkrywajto.pl\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"14 – CSS – ikony\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/informatyka.odkrywajto.pl\\\/#website\",\"url\":\"https:\\\/\\\/informatyka.odkrywajto.pl\\\/\",\"name\":\"Informatyka Zadania\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/informatyka.odkrywajto.pl\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/informatyka.odkrywajto.pl\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pl-PL\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/informatyka.odkrywajto.pl\\\/#organization\",\"name\":\"Informatyka Zadania\",\"url\":\"https:\\\/\\\/informatyka.odkrywajto.pl\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\\\/\\\/informatyka.odkrywajto.pl\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/informatyka.odkrywajto.pl\\\/wp-content\\\/uploads\\\/2024\\\/08\\\/cropped-cropped-Screenshot_1-1.jpg\",\"contentUrl\":\"https:\\\/\\\/informatyka.odkrywajto.pl\\\/wp-content\\\/uploads\\\/2024\\\/08\\\/cropped-cropped-Screenshot_1-1.jpg\",\"width\":834,\"height\":200,\"caption\":\"Informatyka Zadania\"},\"image\":{\"@id\":\"https:\\\/\\\/informatyka.odkrywajto.pl\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/informatyka.odkrywajto.pl\\\/#\\\/schema\\\/person\\\/2bf15d5917c9daa73c658396c450c55a\",\"name\":\"DuzyZajac\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d0247cb306c7300d5d62ec35d6a43e9bb79c7664c537bb856d960383ff954452?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d0247cb306c7300d5d62ec35d6a43e9bb79c7664c537bb856d960383ff954452?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d0247cb306c7300d5d62ec35d6a43e9bb79c7664c537bb856d960383ff954452?s=96&d=mm&r=g\",\"caption\":\"DuzyZajac\"},\"url\":\"https:\\\/\\\/informatyka.odkrywajto.pl\\\/?author=1\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"14 - CSS - ikony - Informatyka Zadania","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/informatyka.odkrywajto.pl\/?p=595","og_locale":"pl_PL","og_type":"article","og_title":"14 - CSS - ikony - Informatyka Zadania","og_description":"https:\/\/www.w3schools.com\/css\/css_icons.asp Zadanie 1 \u2014 Lista ikon z r\u00f3\u017cnymi stylami Cel: Stw\u00f3rz prost\u0105 stron\u0119 HTML, na kt\u00f3rej wy\u015bwietlisz list\u0119 ikon z Font Awesome o r\u00f3\u017cnym stylu i kolorze. Wymagania Do\u0142\u0105cz bibliotek\u0119 Font Awesome przez <script> lub <link>. Wstaw co najmniej 5 r\u00f3\u017cnych ikon z Font Awesome (np. chmurka, serce, samoch\u00f3d itp.). Ustaw r\u00f3\u017cne kolory i rozmiary […]","og_url":"https:\/\/informatyka.odkrywajto.pl\/?p=595","og_site_name":"Informatyka Zadania","article_published_time":"2026-01-09T11:55:35+00:00","article_modified_time":"2026-01-09T11:57:45+00:00","og_image":[{"width":600,"height":465,"url":"https:\/\/informatyka.odkrywajto.pl\/wp-content\/uploads\/2026\/01\/Braun_and_Hogenberg_Zamosc.jpg","type":"image\/jpeg"}],"author":"DuzyZajac","twitter_card":"summary_large_image","twitter_misc":{"Napisane przez":"DuzyZajac","Szacowany czas czytania":"2 minuty"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/informatyka.odkrywajto.pl\/?p=595#article","isPartOf":{"@id":"https:\/\/informatyka.odkrywajto.pl\/?p=595"},"author":{"name":"DuzyZajac","@id":"https:\/\/informatyka.odkrywajto.pl\/#\/schema\/person\/2bf15d5917c9daa73c658396c450c55a"},"headline":"14 – CSS – ikony","datePublished":"2026-01-09T11:55:35+00:00","dateModified":"2026-01-09T11:57:45+00:00","mainEntityOfPage":{"@id":"https:\/\/informatyka.odkrywajto.pl\/?p=595"},"wordCount":171,"publisher":{"@id":"https:\/\/informatyka.odkrywajto.pl\/#organization"},"image":{"@id":"https:\/\/informatyka.odkrywajto.pl\/?p=595#primaryimage"},"thumbnailUrl":"https:\/\/informatyka.odkrywajto.pl\/wp-content\/uploads\/2026\/01\/Braun_and_Hogenberg_Zamosc.jpg","keywords":["css","ikony","style"],"articleSection":["Pomoce","Tutoriale","zadania"],"inLanguage":"pl-PL"},{"@type":"WebPage","@id":"https:\/\/informatyka.odkrywajto.pl\/?p=595","url":"https:\/\/informatyka.odkrywajto.pl\/?p=595","name":"14 - CSS - ikony - Informatyka Zadania","isPartOf":{"@id":"https:\/\/informatyka.odkrywajto.pl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/informatyka.odkrywajto.pl\/?p=595#primaryimage"},"image":{"@id":"https:\/\/informatyka.odkrywajto.pl\/?p=595#primaryimage"},"thumbnailUrl":"https:\/\/informatyka.odkrywajto.pl\/wp-content\/uploads\/2026\/01\/Braun_and_Hogenberg_Zamosc.jpg","datePublished":"2026-01-09T11:55:35+00:00","dateModified":"2026-01-09T11:57:45+00:00","breadcrumb":{"@id":"https:\/\/informatyka.odkrywajto.pl\/?p=595#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/informatyka.odkrywajto.pl\/?p=595"]}]},{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/informatyka.odkrywajto.pl\/?p=595#primaryimage","url":"https:\/\/informatyka.odkrywajto.pl\/wp-content\/uploads\/2026\/01\/Braun_and_Hogenberg_Zamosc.jpg","contentUrl":"https:\/\/informatyka.odkrywajto.pl\/wp-content\/uploads\/2026\/01\/Braun_and_Hogenberg_Zamosc.jpg","width":600,"height":465},{"@type":"BreadcrumbList","@id":"https:\/\/informatyka.odkrywajto.pl\/?p=595#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/informatyka.odkrywajto.pl\/"},{"@type":"ListItem","position":2,"name":"14 – CSS – ikony"}]},{"@type":"WebSite","@id":"https:\/\/informatyka.odkrywajto.pl\/#website","url":"https:\/\/informatyka.odkrywajto.pl\/","name":"Informatyka Zadania","description":"","publisher":{"@id":"https:\/\/informatyka.odkrywajto.pl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/informatyka.odkrywajto.pl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pl-PL"},{"@type":"Organization","@id":"https:\/\/informatyka.odkrywajto.pl\/#organization","name":"Informatyka Zadania","url":"https:\/\/informatyka.odkrywajto.pl\/","logo":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/informatyka.odkrywajto.pl\/#\/schema\/logo\/image\/","url":"https:\/\/informatyka.odkrywajto.pl\/wp-content\/uploads\/2024\/08\/cropped-cropped-Screenshot_1-1.jpg","contentUrl":"https:\/\/informatyka.odkrywajto.pl\/wp-content\/uploads\/2024\/08\/cropped-cropped-Screenshot_1-1.jpg","width":834,"height":200,"caption":"Informatyka Zadania"},"image":{"@id":"https:\/\/informatyka.odkrywajto.pl\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/informatyka.odkrywajto.pl\/#\/schema\/person\/2bf15d5917c9daa73c658396c450c55a","name":"DuzyZajac","image":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/secure.gravatar.com\/avatar\/d0247cb306c7300d5d62ec35d6a43e9bb79c7664c537bb856d960383ff954452?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/d0247cb306c7300d5d62ec35d6a43e9bb79c7664c537bb856d960383ff954452?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d0247cb306c7300d5d62ec35d6a43e9bb79c7664c537bb856d960383ff954452?s=96&d=mm&r=g","caption":"DuzyZajac"},"url":"https:\/\/informatyka.odkrywajto.pl\/?author=1"}]}},"_links":{"self":[{"href":"https:\/\/informatyka.odkrywajto.pl\/index.php?rest_route=\/wp\/v2\/posts\/595","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/informatyka.odkrywajto.pl\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/informatyka.odkrywajto.pl\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/informatyka.odkrywajto.pl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/informatyka.odkrywajto.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=595"}],"version-history":[{"count":1,"href":"https:\/\/informatyka.odkrywajto.pl\/index.php?rest_route=\/wp\/v2\/posts\/595\/revisions"}],"predecessor-version":[{"id":599,"href":"https:\/\/informatyka.odkrywajto.pl\/index.php?rest_route=\/wp\/v2\/posts\/595\/revisions\/599"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/informatyka.odkrywajto.pl\/index.php?rest_route=\/wp\/v2\/media\/598"}],"wp:attachment":[{"href":"https:\/\/informatyka.odkrywajto.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=595"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/informatyka.odkrywajto.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=595"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/informatyka.odkrywajto.pl\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=595"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}