Nejrozšířenější formáty webových ikon

14. 09. 2017

Ikony, piktogramy a symboly jsou už od pradávná nedílnou součástí vizuální komunikace lidstva. V dnešní době sice už nezanecháváme s jejich pomocí vzkazy v jeskyních nebo v útrobách pyramid, ale skvěle nám můžou posloužit mj. jako základní orientace v našich webových stránkách. V tomto článku si představíme ty nejrozšířenější formáty webových ikon a ukážeme si, kde je získat a jak je vkládat na webové stránky.

Typická ukázka webových ikonek v praxi 

Formát PNG

Asi nejběžnějším způsobem, který většinu lidí napadne, je vložit ikonu pomocí obrázku. K tomu slouží bitmapové (rastrové) formáty. Formát PNG (čtětw ping) je nejvhodnějším bitmapovým formátem. Název je zkratkou z anglického slovosledu Portable Network Graphic – v češtině přenosná síťová grafika. Hlavní předností je, že na rozdíl od jiných rastrových formátů, jako je JPEG, disponuje podporou průhlednosti a větší kvalitou zobrazení čárové grafiky.

Výhody

• PNG ikona se na stránky vkládá jako klasický obrázek i přes WYSIWYG editor 
• kvalitnější než JPEG nebo jiný rastrový formát
• disponuje podporou průhlednosti
• bitmapové obrázky se lépe přizpůsobují šířce webu a lépe zachovávají poměr stran

Nevýhody

• PNG není vektorový formát, hrozí zhoršení kvality při úpravě rozměrů 
• nelze měnit barvu a jiné úpravy, musí se měnit pomocí grafického editoru

Způsob vložení

Ikona v PNG formátu se vkládá jako klasický obrázek do administrace inPage a následně se může vložit pomocí textového editoru WYSIWYG. Pokud někdo z vás zapomněl, jak na to, tak zde je o tom článek s názvem Vkládání obrázků a fotogalerií.

Ikon-fonty

Neboli ikony tvořené fontem. Jedná se o zvláštní druh webového písma, ve kterém nejsou definovány normální znaky z abecedy, ale grafické symboly, které se ve výsledku nahradí ikonami.

Výhody

• pomocí CSS můžete nastylovat jinou barvu, stín, zvětšovat a zmenšovat bez ztráty ostrosti či jiného zhoršení kvality a to klidně u všech ikon naráz
• vkládáme je jako HTML kód, a tak nezabírají místo v administraci

Nevýhody

• mají vlastnosti textových fontů a problém může nastat při pozicování
• nemusí se správně nebo vůbec zobrazit na starších mobilních prohlížečích (např. starší verze Opera mini)
• už od svého vzniku byly považovány jen jako dočasné řešení

Způsob vložení

Příklad vložení si ukážeme na fontu zkopírovaného ze stránky fontawesome.io.

Na úvodní stránce klikneme na záložku icons a v ní si ve vyhledávači najdeme požadovanou ikonku.

Tu si následně rozklikneme a zkopírujeme HTML kód.

Ten vložíme na stránku v inPage administraci, kam chceme ikonku umístit. Nejprve si v textovém editoru WYSIWYG otevřeme zdrojový kód pomocí tlačítka < > a poté kód umístíme k prvku, kde chceme ikonu mít.

Pokud se v HTML kódech nevyznáte a nevíte, co jednotlivé prvky znamenají, stačí si v editoru kliknout kurzorem na vybrané místo a to místo se následně v HTML zvýrazní.

Pozor! Vložená ikona nebude ve WYSIWYG editoru vidět. Pro ujištění, že ji tam máte, se podívejte na náhled stránky. Avšak před tím než opustíte textový editor nezapomeňte vše pečlivě uložit. Ikony si můžete zvětšit za pomocí CSS stylu: font- size.

Formát SVG

Vektorový formát, jehož zkratka znamená Scalable Vector Graphics – škálovatelná vektorová grafika, je mezi webovými tvůrci doporučovaným formátem hlavně pro webové ikony. Jeho jednotlivé části jsou přesně popsány XML značkami. Lze jej tedy snadno vložit a upravovat přes HTML kód, anebo jako img soubor.

Výhody

• lze upravovat za pomocí CSS stylů
• úprava rozměrů bez ztráty kvality
• má menší datový objem než bitmapové obrázky

Nevýhody

• SVG formát nemá podporu u starších prohlížečů, jako jsou Internet Explorer 8 a Adobe Browser 2.3

Způsob vložení

Způsobů vložení SVG ikon je více. My si ukážeme ten nejsnazší  a to klasickým vložením jako obrázek.

Např. na stránce iconfinder si najdeme požadovanou ikonu a stáhneme ji v SVG formátu.

V inPage administraci si ikonu nahrajeme jako soubor, nikoliv obrázek. Klikneme na sekci Soubory → přidat soubor nebo hromadné přidání souborů, vybereme uložený soubor s ikonou.

Přemístíme se na stránku, kam chceme ikonu vložit. V textovém editoru WYSIWYG je postup podobný jako při vkládání obrázků. Klikneme na tlačítko pro přidání obrázků, ale místo toho, abychom vybírali z galerie, napíšeme do horního řádku URL adresu souboru. Ta bude vždy ve formátu: /soubor/url-vaseho-souboru-svg/

Odkazy na stránky s webovými ikonami  

PNG a SVG formát

• https://www.iconfinder.com/ - Icon Finder
• https://www.flaticon.com/ - Flat Icon

Ikon-fonty

• http://fontawesome.io/ - Font Awesome
• http://fontastic.me/ - Fontastic

Rada na závěr: Při umístění více ikon se snažte používat ikony z jedné sady. To znamená, aby všechny ikony na vašem webu byly ve stejném stylu.