Weboví vývojáři jsou velmi zvyklí používat ikony k reprezentaci konkrétní akce nebo ikona může graficky znázorňovat jakýkoli příkaz nebo akci nebo indikátor na webové stránce. Ikony se používají v dokumentech i v aplikacích a lze je volit nebo nevybírat.
Například obrázky, které vidíme na tlačítkách aplikace, jsou všechny ikony a tato tlačítka lze vybrat.
Aby se usnadnil návrh a programování webových stránek, byly vyvinuty některé knihovny ikon písem, to znamená ikony, které lze vložit jako textové a jsou k dispozici pro použití na stránkách HTML webové stránky, což ušetří spoustu práce uživatelé, návrháři a programátoři.
V tomto tutoriálu se podíváme na některé knihovny jako Font Awesome, Bootstrap Glyphicons a Material Design Google, což jsou knihovny s přednastavenými fonty ikon, které často používají weboví vývojáři.
Font Awesome Tools and Library
Font Awesome je knihovna písem, která vykresluje ikony pomocí sady nástrojů založených na CSS. Tento nástroj byl vyvinut pro použití s Twitter Bootstrap, ale lze jej použít samostatně jako šablony stylů na jakékoli webové stránce.
Výhodou knihovny CSS je, že funguje v jakémkoli prohlížeči a zařízení a dokonce se přizpůsobí jakémukoli rozlišení obrazovky.
Knihovnu si můžete stáhnout z webu Font Awesome. Další možností je použít přímý odkaz na knihovnu:
Podívejme se na příklad jak implementovat ikony pro sociální sítě pomocí Font Awesome, vytvoříme soubor html a přidáme následující kód:
Úžasné písmo - ikony sociálních médií
Každá ikona je reprezentována ikonou třídy fa, například ikona pro YouTube bude fa-youtube, výsledek při zobrazení v prohlížeči bude následující:
Poté můžeme přidat vlastní třídy CSS nebo upravit předdefinovanou, aby se přizpůsobila našemu designu, například mezi tagy head přidáme následující kód CSS.
Dekorace ikon pomocí CSS
Dále spustíme v prohlížeči a výsledek bude následující:
Vidíme, že jsme na každou ikonu použili CSS a nepřidali jsme žádné obrázky. Další možností, jak zlepšit viditelnost, je změnit vznášet třídu, to znamená, že když se myš pohybuje nad ikonou, změňte barvu písmene.
Za tímto účelem změníme barvu v následujícím řádku:
.social-icons .fa: hover {barva: zelená; } Výsledek při najetí myší na ikonu bude následující:
Můžeme to také udělat s pozadím každé ikony a změnit vlastnost pozadí na barvu, která se nám líbí.
Všechny dostupné ikony jsou k vidění na webu Font Awesome, ikony jsou seřazeny podle kategorií.
Použití tohoto typu písma ikon pro naše webové návrhy nám umožňuje zrychlit načítání stránky, protože nepotřebujeme obrázky a nabízíme vyšší kvalitu (zejména na mobilních zařízeních při zvětšování)
Nástroje a knihovna Glyphicons Bootstrap
Glyphicons Bootstrap je knihovna ikon písem. Nabízí širokou škálu ikon ve formátu písma. Tyto ikony jsou zdarma a knihovnu můžete také rozšířit o placené ikony. Ikony zdarma lze použít v projektech založených na webdesignu, aniž byste je museli kupovat. Tato knihovna je orientována na ikony pro tlačítka, která vykonávají některé funkce, jako je tisk, vyhledávání, ukládání atd.
Tato knihovna je zahrnuta jako šablony stylů v Bootstrapu, k jejímu použití si můžeme stáhnout Bootstrap z jeho oficiální stránky nebo použít následující odkaz:
Ikony můžeme také vidět podle kategorií na stránce Glyphicons.
Dále se podívejme na příklad, který používáme tuto knihovnu pro ikony pro tlačítka a prvky pro zadávání dat pro formulář:
Glyphicon Bootstrap - tlačítkaTestovali jsme na mobilním zařízení, jak by vypadalo:Glyphicon Bootstrap - tlačítka
Hledat Tisk Přihlásit Koupit
Na výběr použijeme ikonu seznamu
Automobily Motocykly
Výhodou použití ikon písem nebo ikon písem je, že ušetří nutnost vyvolat obrázek nebo ikonu, protože obrázky jsou ve formátu svg v souboru css knihovny a tyto obrázky jsou škálovatelné.
Kompletní knihovna může mít velikost mezi 10 kB a 40 kB, což zvyšuje rychlost načítání webu.
Ikony jsou textové, proto s nimi můžeme manipulovat pomocí CSS a bude reagovat na každou událost, kterou naprogramujeme pomocí Jquery.
Pokud ve vlastnosti Písmo CSS označujeme velikost písma v em například velikost písma: 4em bude ikona reagovat a přizpůsobí se jakémukoli zařízení. Lze je také použít k programování responzivních aplikací s frameworky, jak je vidět v tutoriálu, programování mobilních aplikací pomocí Ionic Framework, tyto ikony se také používají.
Líbil se vám tento návod a pomohl mu?Autora můžete odměnit stisknutím tohoto tlačítka, čímž mu dáte kladný bod
