Co je ikona písma? (A jak jej používat)

Písma ikon jsou populárním řešením běžného problému CSS; jak integrovat webové ikony do designu vašich webových stránek efektivním a rychlým způsobem.

Díky velkému množství služeb, které usnadňují výběr a použití písma ikon, nemusíte vytvářet vlastní od nuly. Písma ikon jsou po celém internetu.

Ale co přesně je ikona písma? A jak je používáte? Zde je průvodce všeho, co potřebujete vědět o ikonových fontech.

Prozkoumejte písma

Co je ikona písma?

Písma ikon jsou písma, která používají spíše drobné obrázky než formáty písmen. Stejně jako typ je každý znak škálovatelný a lze jej upravit pomocí CSS.

Hlavními důvody pro použití písma ikon jsou, že můžete snadno změnit velikost, barvu, tvar. Písma ikon jsou svou povahou průhledná, takže je můžete umístit na jakoukoli barvu nebo typ pozadí a můžete přidávat tahy nebo měnit neprůhlednost ikon.

Je to vše provedeno pomocí CSS, takže nemusíte vytvářet jedinečné obrázky pro každou novou instanci ikony v designu. (To je skvělé pro udržení vašeho webu a kódu lehké.)

Písma ikon jsou vektorové obrázky, což znamená, že jsou škálovatelné. Stejně jako u každého jiného písma je můžete učinit tak velkými nebo malými, jak chcete. Písmo ikon používejte jako umělecké prvky samostatně nebo dokonce roztroušené po jiných textových polích.

Nejoblíbenější a nejznámější knihovnou ikonových písem je Font Awesome. Používá se pro více než 100 milionů webových stránek a zahrnuje rozsáhlou sbírku možností ikon. Funguje se všemi oblíbenými nástroji, včetně webových písem + CSS, SVG + JS, náčrtu, Adobe Apps, Vue.js, úhlových, reakčních a Emberových.

Existuje také několik docela dobře známých sad ikon písem.

• Flaticon
• Icofont
• Fontello
• IcoMoon

Výhody a nevýhody používání ikon písma

Tak proč byste použili - nebo se vyhnuli - fontům ikon? Zde jsou některé výhody a nevýhody práce s tímto stylem uměleckého prvku.

Výhody používání ikon písma

• Ikony lze snadno měnit, pokud v CSS existují odpovídající třídy
• Můžete získat velké knihovny ikon s malými problémy
• Změna vlastností ikon je snadná, nezáleží na tom, co jste použili k vytvoření svého webu
• Je snadné přidat ikony na libovolnou stránku na webu (stačí zadat název ikony)
• Ve všech druzích stylů si můžete vybrat tisíce ikon
• Uživatelé WordPressu mohou přidat ikonová písma pomocí jednoduchého pluginu nebo překlopením adresáře písem do kódu (téměř jakékoli rozhraní)
• Pokud potřebujete něco super přizpůsobeného, ​​můžete si vytvořit vlastní písmo ikon

Nevýhody používání ikon písma

• Ikony jsou jedna barva nebo barevný přechod (ve většině případů); některé další prémiové balíčky to mění
• Pokud se písmo ikony nenačte, není k dispozici žádná dobrá náhrada
• Možná nebudete potřebovat celou sadu ikon
• Někteří čtenáři obrazovky nevědí, co dělat s fonty ikon
• Možná nenajdete balíček, který vyhovuje vašim potřebám

Jak používat ikonová písma

Přestože se pokyny pro používání ikonových písem mohou mírně lišit v závislosti na poskytovateli, kterého si vyberete, základní myšlenka je stejná.

Obecně platí, že máte tři možnosti (pokud nemáte v úmyslu udělat trochu tvrdší kódování sami):

• Použijte plugin, který nainstaluje vše, takže musíte volat pouze ikony, které chcete použít. (Super snadné!)
• Používejte vestavěné ikony písem z vašeho redakčního systému nebo tvůrce webových stránek. Funguje to skvěle, pokud nemáte vlastní web nebo potřebujete / chcete konkrétní typ ikony písma. Většina tvůrců webových stránek přichází s něčím „z krabice“.
• Ručně propojit s externě hostovaným ikonovým písmem. (Složitější verze použití pluginu.)

Ikony písma vs. SVG

Větší debata se přesouvá na to, zda byste měli (nebo byste chtěli) použít ikonu písma versus obrázky SVG za účelem vkládání malých obrázků na svůj web. Obě možnosti jsou stejně životaschopné a mají mnoho společného s osobními preferencemi.

Písma ikon je pro většinu lidí obecně snazší najít a používat. Ikony SVG preferují uživatelé, kteří potřebují větší kontrolu nad designem.

Soubor SVG (škálovatelný vektorový formát) vám může dát trochu více flexibility v designu. (Nejste omezeni na jednu barvu). Malé škálovatelné soubory lze nahrát přímo do mediálního adresáře a snadno se s nimi pracuje. Toto je dobrá volba, pokud potřebujete pouze hrst ikon a nechcete se zabývat knihovnou.

SVG jsou flexibilnější a mají možnost přidat více barev a animací.

Písma ikon může být z dlouhodobého hlediska rychlejší načítání, protože jsou uloženy v mezipaměti. Rozdíl však může být docela minimální.

Polohování písem ikon může být trochu složitější, protože podléhají typickým pravidlům písma, jako je velikost, řádkování a svislé zarovnání. To je důvod, proč se většina lidí, kteří používají písmo ikon, rozhodnou pro zavedeného poskytovatele, místo aby se snažili vytvořit si vlastní.

SVG mohou zahrnovat prvky, které je činí dostupnějšími než ikonová písma, která se mohou čtenářům obrazovky objevit jako písmena písmen.

Písma ikon je pro většinu lidí obecně snazší najít a používat. Knihovny jsou obecně dostupné a není těžké jim porozumět. Ikony SVG upřednostňují uživatelé, kteří chtějí více možností kontroly designu a přizpůsobení.

Obě možnosti se běžně používají a ve většině případů fungují dobře. Sbíráme jeden má hodně co dělat s tím, co vám nejvíce vyhovuje a co odpovídá vašemu designu estetického a uživatelského rozhraní.

Závěr

Jedním z důvodů, proč jsou písma ikon tak oblíbená, je to, že jsou univerzální a snadno se používají. Díky škálovatelnému formátu, který lze nainstalovat pomocí několika kliknutí do většiny systémů pro správu obsahu, může téměř kdokoli začít rychle používat fonty ikon.

Skutečným přínosem pro ikonu písma je, že prvek používá CSS a nejedná se o nezávislý obrazový soubor. To je dobré pro vytvoření štíhlé webové stránky s prvky, které se načítají rychle a ve vektorovém formátu (skvělé, pokud potřebujete později změnit velikost).