Víkendový tip: fonty, barvy, ikonky, SVG

Z uplynulých konferencí se mi nahromadilo několik zajímavých odkazů, o které bych se s vámi rád podělil. V článku najdete pár tipů na služby pro stažení fontů, ikonek, souborů SVG a zjištění barev.
reklama

Na přednáškách a konferencích se mi líbí především tipy z praxe. Mnohdy se tak člověk dozví zajímavé tipy a vidí nápady, které nesouvisí až tak z hlavním tématem přednášky, ale o to více ho zaujmou. Od začátku roku jsem takto na různých akcích posbíral několik odkazů, které bych si rád tímto článkem uložil a zároveň se o ně s vámi rád podělím.

Fonty

Když přijde řeč na webové fonty, asi vás jako první napadnou Google Fonts. Mě samozřejmě taky, možná ještě Adobe Typekit. Ale zajímavých webů s písmy pro použití nejenom na webu, je více. Mrkněte například na web 1001 free fonts.

Ikonky a ikonkové fonty

Co se ikonek týče, dnes již máme nepřeberné množství zdrojů, odkud je čerpat. Na webech, které s kolegy stavím, čím dál častěji používám nějaké vektorové ikonky. Obvykle Font Awesome, který asi dobře znáte. Pokud byste rádi využili jeho ikonky, ale přitom nechcete implementovat celý soubor fontu a používat to s třídou v CSS, mrkněte na webovou aplikaci fa2png.io, která konvertuje zvolené ikonky do souboru PNG.

Vzhledem k bezproblémové podpoře SVG v aktuálních prohlížečích, je však někdy lepší použít vektorový soubor. A vhodnější, například kvůli displejům Retina. Koukněte na FlatIcon.com, kde si můžete mimo jiné stáhnout celou sadu Font Awesome v balíčku obsahujícím ikonky ve formátech EPS, PNG, PSD a právě SVG.

Hledáte-li nějakou jinou rozsáhlejší sadu ikonek k použití na vašem webu, mrkněte na Glyphicons.com. Obsahuje přes osm stovek různých symbolů. Základní sada plus ikonky sociálních sítí jsou tu zdarma ke stažení, komplet s různými velikostmi PNG a PSD je k mání za 25 dolarů. Na 59 dolarů vás pak přijde celá sada včetně SVG a dalších formátů. Pokud se vám ikonky líbí a chcete je využívat nějak častěji, pak se to vyplatí. Už třeba proto, že je zde i přes 140 ikonek různých typů souborů.

Zdá se vám, že ikonkové fonty jako je zmíněný Font Awesome jsou zbytečně veliké, když stejně použijete jen pár z jejich ikonek? Pak vám nic nebrání v tom, vytvořit si vlastní ikonkový font. Můžete použít buď symboly z Font Awesome či jiných sad, nebo si do fontu nahrát vlastní SVG. Výsledek pak máte přímo na míru, bez zbytečných dalších dat. Vlastní ikonkové fonty si vyrobíte na webech Fontastic nebo Fontello během pár okamžiků.

Barvy

Poslední z tipů vám pomůže s obarvením ikonek tím správným barevným odstínem. Jak asi víte, vektorové ikonky jsou dodávány obvykle v černé barvě a je na každém, aby si ji upravil, jak potřebuje. Pokud chcete tedy obarvit ikonky například sociálních sítí, ale nechcete zkoumat CSS kód jejich webů, mrkněte na BrandColors. Najdete zde celou škálu společností a značek s jejich typickými barvami. Po najetí na zvolenou barvu se vám pak objeví příslušný hexakód pro zápis v CSS (či jinde).

Jak barvím ikonky já? V ikonkovém fontu vyřešíte zabarvení ikonky jednoduše – nastavením CSS vlastnosti color. Tedy pokud má mít ikonka jednu jedinou barvu. V momentě, kdy potřebujete obarvit samostatnou vektorovou ikonku, je to mírně složitější. Buď si SVG otevřete v textovém editoru a upravte atribut fill, nebo použijte grafický editor, který to s SVG umí. Ve Windows by to měl zvládat bezplatný InkScape, na Macu používám povedený Sketch.

Tagy
Autor článku: Jan Polzer

Tvůrce webů z Brna se specializací na Drupal a Symfony. Obojí také školím spolu se základy SEO. Jsem Acquia Certified Developer a Site Builder a napsal jsem několik knih o Drupalu. Ve volných chvílích cestuji a podnikám výlety. Více se dozvíte na mém firemním webu.

reklama

Komentáře k článku

Přidat komentář

Filtered HTML

  • Povolené HTML značky: <a href hreflang> <em> <strong> <cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <p> <br>
  • Řádky a odstavce se zalomí automaticky.
  • Web page addresses and email addresses turn into links automatically.

Odesláním komentáře souhlasíte s podmínkami Ochrany osobních údajů

reklama
Sledujte Maxiorla na Facebooku

Maxiorel na Facebooku

Poslední komentáře
reklama
reklama
Hosting pro Drupal a WordPress

Hledáte český webhosting vhodný nejenom pro redakční systém Drupal? Tak vyzkoušejte Webhosting C4 za 1200 Kč na rok s doménou v ceně, 20 GB prostoru a automatické navyšováním o 2 GB každý rok. Podrobnosti zde.

Knihy o Drupalu

Kniha Drupal 8 Kniha Drupal 7 333 tipů a triků pro Drupal
Více na KnihyPolzer.cz

@maxiorel na Twitteru

Maxiorel na Twitteru